{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-grid/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"4a6e44d8-0092-5ad2-a220-6d8bd48e4e23","title":"Tailwind Grid","slug":"/classes/tailwind-grid/"},"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\": \"20 May 2024\",\n \"title\": \"Tailwind Grid\",\n \"metaTitle\": \"Tailwind CSS Grid\",\n \"metaDescription\": \"The Tailwind grid utility class allows you to create grid-based layouts quickly and easily.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-grid\"\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\"), mdx(\"p\", null, \"The tailwind grid utility class allows you to create grid-based layouts quickly and easily. It provides a set of classes that enable you to define grid containers, grid columns, and grid rows, allowing you to create responsive and flexible grid layouts for your web applications.\"), mdx(\"h2\", null, \"Setting a Tailwind grid Container\"), mdx(\"p\", null, \"To create a tailwind grid container, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid\"), \" class. This class sets the display property of the element to grid and enables grid behavior. By default, the grid container has a single implicit grid track in each direction.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
D
\\n
E
\\n
F
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-yellow-100 p-10 \"\n }, mdx(\"div\", {\n className: \"grid grid-cols-3 gap-4\"\n }, mdx(\"div\", {\n className: \" rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n }, \"A\"), mdx(\"div\", {\n className: \" rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n }, \"B\"), mdx(\"div\", {\n className: \"rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n }, \"C\"), mdx(\"div\", {\n className: \" rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n }, \"A\"), mdx(\"div\", {\n className: \" rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n }, \"B\"), mdx(\"div\", {\n className: \"rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n }, \"C\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Tailwing Grid Rows\"), mdx(\"p\", null, \"To define the tailwind grid rows within a grid container, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid-rows-{n}\"), \" class, where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{n}\"), \" is the number of desired rows. This class evenly distributes the available space among the specified number of rows.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
D
\\n
E
\\n
F
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10 \"\n }, mdx(\"div\", {\n className: \"h-64 grid grid-rows-3 grid-flow-col gap-4\"\n }, mdx(\"div\", {\n className: \" rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n }, \"A\"), mdx(\"div\", {\n className: \" rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n }, \"B\"), mdx(\"div\", {\n className: \"rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n }, \"C\"), mdx(\"div\", {\n className: \" rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n }, \"A\"), mdx(\"div\", {\n className: \" rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n }, \"B\"), mdx(\"div\", {\n className: \"rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n }, \"C\"))), mdx(\"h2\", null, \"Tailwind Grid columns\"), mdx(\"p\", null, \"To define the tailwind grid columns within a grid container, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid-cols-{n}\"), \" class, where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{n}\"), \" is the number of desired columns. This class evenly distributes the available space among the specified number of columns\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
D
\\n
E
\\n
F
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-purple-100 p-10 \"\n }, mdx(\"div\", {\n className: \"grid grid-cols-3 gap-4\"\n }, mdx(\"div\", {\n className: \" rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold\"\n }, \"A\"), mdx(\"div\", {\n className: \" rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold\"\n }, \"B\"), mdx(\"div\", {\n className: \"rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold\"\n }, \"C\"), mdx(\"div\", {\n className: \" rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold\"\n }, \"A\"), mdx(\"div\", {\n className: \" rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold\"\n }, \"B\"), mdx(\"div\", {\n className: \"rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold\"\n }, \"C\"))), mdx(\"h2\", null, \"Responsive Tailwind Grid\"), mdx(\"p\", null, \"Tailwind CSS provides responsive utility classes for creating grids, allowing you to define different grid layouts at different breakpoints. To use responsive tailwind grid classes, you can append the breakpoint prefix to the grid classes. For example, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md:grid-cols-2\"), \" sets the number of grid columns to 2 starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
D
\\n
E
\\n
F
\\n
\\n\")), mdx(\"h2\", null, \"Tailwind Grid Column 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 }, \"grid-cols-1\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(1, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-2\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(2, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-3\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(3, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(4, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(5, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(6,minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-7\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(7, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-8\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(8, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-9\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(9,minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-10\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(10, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-11\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(11, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: repeat(12,minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-cols-none\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-columns: none;\")))), mdx(\"h2\", null, \"Tailwind Grid 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 }, \"grid-rows-1\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-rows: repeat(1, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-rows-2\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-rows: repeat(2, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-rows-3\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-rows: repeat(3, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-rows-4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-rows: repeat(4, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-rows-5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-rows: repeat(5, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-rows-6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-rows: repeat(6, minmax(0, 1fr));\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-rows-none\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"grid-template-rows: none;\")))), 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","title":"Tailwind grid","items":[{"url":"#setting-a-tailwind-grid-container","title":"Setting a Tailwind grid Container"},{"url":"#preview","title":"Preview"},{"url":"#tailwing-grid-rows","title":"Tailwing Grid Rows"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-grid-columns","title":"Tailwind Grid columns"},{"url":"#preview-2","title":"Preview"},{"url":"#responsive-tailwind-grid","title":"Responsive Tailwind Grid"},{"url":"#tailwind-grid-column-class-table","title":"Tailwind Grid Column Class Table"},{"url":"#tailwind-grid-rows-class-table","title":"Tailwind Grid Rows Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-grid.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Grid","lastUpdated":"20 May 2024","metaDescription":"The Tailwind grid utility class allows you to create grid-based layouts quickly and easily."}}},"pageContext":{"id":"4a6e44d8-0092-5ad2-a220-6d8bd48e4e23"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}