{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-grid-row-start-end/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"9138064c-6984-5da9-bef6-bd9c9372e898","title":"Tailwind CSS Grid Row Start/End","slug":"/classes/tailwind-grid-row-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\": \"76 May 2024\",\n  \"title\": \"Tailwind CSS Grid Row Start/End\",\n  \"metaTitle\": \"Tailwind Grid Row Start/End\",\n  \"metaDescription\": \"The tailwind grid-row-{start/end} utility classes allows you to control the starting and ending positions of grid items within a grid container along the vertical axis.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-grid-row-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 Row Start/End\"), mdx(\"p\", null, \"The tailwind grid-row-{start/end} utility classes allows you to control the starting and ending positions of grid items within a grid container along the vertical axis. With Tailwind's grid-row-start and grid-row-end classes, you can easily define the placement of grid items within a grid layout.\"), mdx(\"h2\", null, \"Applying Tailwind Grid Row Start/End\"), mdx(\"p\", null, \"To apply row start and end positions to a grid item, you can use the tailwind row-{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.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-64 grid grid-rows-3 grid-flow-col gap-4\\\">\\n  <div class=\\\"bg-blue-500 row-start-1 row-end-2\\\">Item 1</div>\\n  <div class=\\\"bg-blue-500\\\">Item 2</div>\\n  <div class=\\\"bg-blue-500 row-span-2\\\">Item 3</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-8\"\n  }, mdx(\"div\", {\n    className: \"h-64 grid grid-rows-3 grid-flow-col gap-4\"\n  }, mdx(\"div\", {\n    className: \"row-start-1 row-end-2 col-span-2 bg-blue-500 rounded-md flex justify-center items-center text-white text-2xl font-extrabold\"\n  }, \"Item 1\"), mdx(\"div\", {\n    className: \" bg-blue-500 rounded-md flex justify-center items-center text-white text-2xl font-extrabold\"\n  }, \"items 2\"), mdx(\"div\", {\n    className: \" bg-blue-500 row-span-2 rounded-md flex justify-center items-center text-white text-2xl font-extrabold\"\n  }, \"items 3\"))), mdx(\"h2\", null, \"Responsive Tailwind Grid Row Start/End\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply row start and end positions responsively at different breakpoints. To use responsive tailwind grid row start/end classes, you can append the breakpoint prefix to the utility classes. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:grid-row-start-2\"), \" sets the start position to the second row starting from the medium breakpoint and above. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"grid grid-cols-2 md:grid-cols-3\\\">\\n  <div class=\\\"bg-gray-200 md:grid-row-start-2 md:grid-row-end-4\\\">Item 1</div>\\n  <div class=\\\"bg-gray-200\\\">Item 2</div>\\n  <div class=\\\"bg-gray-200\\\">Item 3</div>\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, a grid container with 2 columns by default (grid-cols-2) and 3 columns starting from the medium breakpoint and above (md:grid-cols-3) is created. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:grid-row-start-2\"), \" class is applied to the first grid item (Item 1) to specify that it should start at the second row from the medium breakpoint, and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:grid-row-end-4\"), \" class is used to specify that it should end at the fourth row.\"), mdx(\"h2\", null, \"Tailwind Grid Row start/end Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: auto;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-span-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: span 1 / span 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-span-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: span 2 / span 2;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-span-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: span 3 / span 3;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-span-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: span 4 / span 4;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-span-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: span 5 / span 5;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-span-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: span 6 / span 6;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-span-full\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row: 1 / -1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: 2;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: 3;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: 4;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: 5;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: 6;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: 7;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-start-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-start: auto;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: 2;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: 3;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: 4;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: 5;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: 6;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: 7;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-end-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-row-end: auto;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=teams10\"\n  }, \"Team\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-grid-row-startend","title":"Tailwind Grid Row Start/End","items":[{"url":"#applying-tailwind-grid-row-startend","title":"Applying Tailwind Grid Row Start/End"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-grid-row-startend","title":"Responsive Tailwind Grid Row Start/End"},{"url":"#tailwind-grid-row-startend-class-table","title":"Tailwind Grid Row start/end Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-grid-row-start-end.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Grid Row Start/End","lastUpdated":"76 May 2024","metaDescription":"The tailwind grid-row-{start/end} utility classes allows you to control the starting and ending positions of grid items within a grid container along the vertical axis."}}},"pageContext":{"id":"9138064c-6984-5da9-bef6-bd9c9372e898"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}