{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-grid-auto-rows/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"687aba4e-2c3c-57e2-81b6-1bf7300b26a0","title":"Tailwind CSS Grid Auto Rows","slug":"/classes/tailwind-grid-auto-rows/"},"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\": \"3 May 2024\",\n  \"title\": \"Tailwind CSS Grid Auto Rows\",\n  \"metaTitle\": \"Tailwind Grid Auto Rows\",\n  \"metaDescription\": \"The tailwind grid-auto-rows utility class allows you to control the height of grid rows in a grid container when they don't have an explicit height defined.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-grid-auto-rows\"\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 Auto Rows\"), mdx(\"p\", null, \"The tailwind grid-auto-rows utility class allows you to control the height of grid rows in a grid container when they don't have an explicit height defined. With Tailwind's grid-auto-rows class, you can easily set a default height for the rows in a grid layout.\"), mdx(\"h2\", null, \"Applying Tailwind Grid Auto Rows\"), mdx(\"p\", null, \"To apply grid auto rows to a grid container, you can use the tailwind grid-auto-rows-{size} utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{size}\"), \" represents the desired height of the grid rows. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{size}\"), \" can be one of the predefined sizes in Tailwind CSS, such as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grid-auto-rows-auto\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grid-auto-rows-1\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grid-auto-rows-2\"), \", or you can customize the height using the sizing scale.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"grid grid-cols-3 grid-auto-rows-1/3\\\">\\n  <div class=\\\"bg-yellow-500\\\">Element 1</div>\\n  <div class=\\\"bg-yellow-500\\\">Element 2</div>\\n  <div class=\\\"bg-yellow-500\\\">Element 3</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-yellow-100 p-6\"\n  }, mdx(\"div\", {\n    className: \"grid grid-cols-3 grid-auto-rows-1/3 gap-1\"\n  }, mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-yellow-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 1\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-yellow-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 2\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-yellow-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 3\"))), mdx(\"p\", null, \"In the above example, a grid container with 3 columns is created using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grid-cols-3\"), \". The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grid-auto-rows-1/3\"), \" class is applied to set the height of the grid rows to 1/3 of the container height.\"), mdx(\"h2\", null, \"Responsive Tailwind Grid Auto Rows\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply grid auto rows responsively at different breakpoints. To use responsive tailwind grid auto rows classes, you can append the breakpoint prefix to the grid auto rows class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:grid-auto-rows-1/2\"), \" sets the height of the grid rows to 1/2 of the container height 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 grid-auto-rows-1/2 md:grid-auto-rows-1/3\\\">\\n  <div class=\\\"bg-gray-200\\\">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 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(grid-cols-2)\"), \" and 3 columns starting from the medium breakpoint and above \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(md:grid-cols-3)\"), \" is created. The tailwind grid-auto-rows-1/2 class sets the height of the grid rows to 1/2 of the container height by default, and the\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:grid-auto-rows-1/3\"), \" class sets the height to 1/3 of the container height starting from the medium breakpoint and above.\"), mdx(\"h2\", null, \"Tailwind Grid Auto Rows 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  }, \"auto-rows-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-auto-rows: auto;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"auto-rows-min\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-auto-rows: min-content;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"auto-rows-max\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-auto-rows: max-content;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"auto-rows-fr\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid-auto-rows: minmax(0, 1fr);\")))), 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-auto-rows","title":"Tailwind Grid Auto Rows","items":[{"url":"#applying-tailwind-grid-auto-rows","title":"Applying Tailwind Grid Auto Rows"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-grid-auto-rows","title":"Responsive Tailwind Grid Auto Rows"},{"url":"#tailwind-grid-auto-rows-class-table","title":"Tailwind Grid Auto Rows Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-grid-auto-rows.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Grid Auto Rows","lastUpdated":"3 May 2024","metaDescription":"The tailwind grid-auto-rows utility class allows you to control the height of grid rows in a grid container when they don't have an explicit height defined."}}},"pageContext":{"id":"687aba4e-2c3c-57e2-81b6-1bf7300b26a0"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}