{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-grid-row/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"abd8bbb7-aca2-54ad-bc3d-9edffa92ac74","title":"Tailwind CSS Grid Template Row","slug":"/classes/tailwind-grid-row/"},"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\": \"12 May 2024\",\n \"title\": \"Tailwind CSS Grid Template Row\",\n \"metaTitle\": \"Tailwind Grid Template Row\",\n \"metaDescription\": \"The tailwind grid-column.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-grid-row\"\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\"), mdx(\"p\", null, \"In CSS grid layout, a grid row is a horizontal track in the grid container. Grid rows are used in combination with grid columns to layout items on a 2-dimensional grid system. The grid-template-rows property is used to define the number and size of these rows.\"), mdx(\"h2\", null, \"Applying Grid Rows in Tailwind CSS\"), mdx(\"p\", null, \"In Tailwind CSS, you can define the number of grid rows in your grid container using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid-rows-{n}\"), \" utility, where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{n}\"), \" is the number of rows.\"), mdx(\"p\", null, \"For example, to create a grid container with three rows, you would use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid-rows-3\"), \" class:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-md bg-purple-50\"\n }, mdx(\"div\", {\n className: \"grid grid-rows-3 grid-flow-col gap-2 font-mono text-white text-sm text-center font-bold leading-6 pt-7 pb-5 rounded-lg\"\n }, mdx(\"div\", {\n className: \"p-4 rounded-lg shadow-lg bg-purple-500\"\n }, \"A\"), mdx(\"div\", {\n className: \"p-4 rounded-lg shadow-lg bg-purple-500\"\n }, \"B\"), mdx(\"div\", {\n className: \"p-4 rounded-lg shadow-lg bg-purple-500\"\n }, \"C\"), mdx(\"div\", {\n className: \"p-4 rounded-lg shadow-lg bg-purple-500\"\n }, \"D\"))), mdx(\"p\", null, \"In this example, the grid container has three grid items, each occupying one grid row.\"), mdx(\"h2\", null, \"Spanning Across Multiple Grid Rows\"), mdx(\"p\", null, \"You can also span an item across multiple grid rows using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"row-span-{n}\"), \" utility, where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{n}\"), \" is the number of rows to span across.\"), mdx(\"p\", null, \"Let's modify the previous example and make the second item span across two rows:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-md bg-indigo-50\"\n }, mdx(\"div\", {\n className: \"grid grid-rows-3 gap-2 font-mono text-white text-sm text-center font-bold leading-6 pt-7 pb-5 rounded-lg\"\n }, mdx(\"div\", {\n className: \"p-4 rounded-lg shadow-lg bg-indigo-500\"\n }, \"A\"), mdx(\"div\", {\n className: \"row-span-2 p-4 rounded-lg shadow-lg bg-indigo-500\"\n }, \"B\"), mdx(\"div\", {\n className: \"p-4 rounded-lg shadow-lg bg-indigo-500\"\n }, \"C\"))), mdx(\"p\", null, \"Now, the second item will take up two rows, spanning from the second row to the third row.\"), mdx(\"h2\", null, \"Customizing Grid Rows\"), mdx(\"p\", null, \"If the default grid row classes do not meet your needs, Tailwind allows you to extend the default configuration via the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tailwind.config.js\"), \" file. You can add custom grid row configuration like so:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"module.exports = {\\n theme: {\\n extend: {\\n gridTemplateRows: {\\n 'custom': 'repeat(4, minmax(0, 1fr))',\\n }\\n }\\n }\\n}\\n\\n\")), mdx(\"p\", null, \"In this example, a custom grid row configuration named 'custom' was added, which creates a grid with four rows of equal size. You can use it just like the default classes:\"), 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