{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-grid-column-start-end/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"2034c3b0-8ce7-5fe0-b1ea-6e249746eeae","title":"Tailwind CSS Grid Column Start/End","slug":"/classes/tailwind-grid-column-start-end/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"lastUpdated\": \"9 May 2024\",\n \"title\": \"Tailwind CSS Grid Column Start/End\",\n \"metaTitle\": \"Tailwind Grid Column Start/End\",\n \"metaDescription\": \"The tailwind grid-column-{start/end} utility classes allow you to control the starting and ending positions of grid items within a grid container along the horizontal axis.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-grid-column-start-end\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Tailwind Grid Column Start/End\"), mdx(\"p\", null, \"The tailwind grid-column-{start/end} utility classes allow you to control the starting and ending positions of grid items within a grid container along the horizontal axis. With Tailwind's grid-column-start and grid-column-end classes, you can easily define the placement of grid items within a grid layout.\"), mdx(\"h2\", null, \"Applying Tailwind Grid Column Start/End\"), mdx(\"p\", null, \"To apply column start and end positions to a grid item, you can use the tailwind col-{start/end}-{line} utility classes, where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{start/end}\"), \" represents the desired start and end positions, and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{line}\"), \"represents the line number or name of the grid track. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
Item 1
\\n
Item 2
\\n
Item 3
\\n
Item 4
\\n
Item 5
\\n
\\n
Item 1
\\n
Item 2
\\n
Item 3
\\n