{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-add-tailwind-css-grid-to-your-project/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"d2c9ce01-4705-508f-9ff7-86046d787f2e","excerpt":"Tailwind Grid Tailwind Grid is a powerful and flexible system for building responsive and customizable grid layouts. With Tailwind Grid, you can easily create…","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 \"title\": \"How to use Tailwind CSS Grid.\",\n \"lastUpdated\": \"24 JUNE 2024\",\n \"date\": \"2023-01-10T02:16:04+01:00\",\n \"metaTitle\": \"How to use Tailwind CSS Grid.\",\n \"metaDescription\": \"Tailwind Grid is a powerful and flexible system for building responsive and customizable grid layouts. With Tailwind CSS Grid, you can easily create complex grid structures and layouts without writing custom CSS.\",\n \"type\": \"blog\",\n \"author\": \"Emmanuel Chinonso\",\n \"role\": \"Technical Writer/Web Developer\",\n \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n \"image\": \"./_/images/css-grid-in-your-project.png\",\n \"tags\": [\"tailwindcss\", \"CSSGrid\", \"Tailwindcssgrid\"],\n \"previousTitle\": \" How to add tailwind CSS colors and Fonts to your project\",\n \"previousPath\": \"how-to-add-tailwind-css-colors-and-fonts-to-your-project\",\n \"nextTitle\": \"How to create a Beautiful Responsive Navigation bar Using Tailwind CSS\",\n \"nextPath\": \"how-to-create-a-beautiful-responsive-navbar-using-tailwind-css\",\n \"blogtype\": \"tailwindcss\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-add-tailwind-css-grid-to-your-project\"\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, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-grid\"\n }, \"Tailwind Grid\"), \" is a powerful and flexible system for building responsive and customizable grid layouts. With Tailwind Grid, you can easily create complex grid structures and layouts without writing custom CSS. In this article, we will explore how to use Tailwind Grid, including the basics, advanced techniques, and best practices.\"), mdx(\"h2\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"What is Tailwind Grid System\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Getting Started with Tailwind CSS Grid\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Basic Grid Structure in Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Grid Template Columns\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Grid Column Start/End\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Grid Template Rows\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Grid Row Start/End\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Grid Auto Flow\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind CSS Gap\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Responsive Tailwind Grid\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Customizing the Tailwind CSS Theme\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Resources\")), mdx(\"h2\", null, \"What is Tailwind Grid System\"), mdx(\"p\", null, \"First, it\\u2019s essential to understand that Tailwind\\u2019s grid system is built on the CSS Grid Layout. If you\\u2019re familiar with CSS Grid, Tailwind\\u2019s system will feel like a more intuitive extension. Tailwind\\u2019s grid utilities offer a straightforward way to implement complex layouts without needing to write custom CSS. You get a lot of control with minimal code.\"), mdx(\"p\", null, \"Tailwind grid System is a two-dimensional layout that is made up of rows and columns of horizontal and vertical lines. It is a collection of classes and utilities that can create complex layouts quickly and easily.\"), mdx(\"h2\", null, \"Getting Started with Tailwind CSS Grid\"), mdx(\"p\", null, \"Before you can start using the Tailwind grid, you need to install Tailwind to your project. This can be done with a package manager such as \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"NPM\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Yarn\"), \".\\nYou can check out how to install Tailwind on your project using the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindcss.com/docs/installation\"\n }, \"Tailwind docs\"), \".\\nOnce you have installed Tailwind, you need to include it in your project. You can do this by adding the following line of code to your HTML file:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\")), mdx(\"h2\", null, \"Basic Grid Structure in Tailwind CSS\"), mdx(\"p\", null, \"The default Tailwind grid is based on the 12-column grid system.\\nThis means that you can divide your page into 12 columns, each with a specific width. You can also divide your page into rows, with each row having its own set of columns.\"), mdx(\"h2\", null, \"Tailwind Grid Template Columns\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Specifying the Columns in Grid\")), mdx(\"p\", null, \"The basic grid structure in Tailwind consists of a container element with the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid\"), \" class, and child elements with the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/grid/col-end-12\"\n }, \"grid-cols-(n)\"), \" class. The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-grid-column\"\n }, \"Tailwind CSS grid template columns\"), \" are the alternative to CSS grid template columns. This property is used to set the number of columns and the size of the grid layout. Below are the different classes and properties of the Tailwind grid Template columns.\"), 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 }, \"Property\"))), 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 }, \"the row concedes one column\")), 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 }, \"the row concedes two columns\")), 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 }, \"the row concedes three columns\")), 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 }, \"the row concedes four columns\")), 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 }, \"the row concedes five columns\")), 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 }, \"the row concedes six columns\")), 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 }, \"the row concedes seven columns\")), 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 }, \"the row concedes eight columns\")), 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 }, \"the row concedes nine columns\")), 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 }, \"the row concedes ten columns\")), 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 }, \"the row concedes eleven columns\")), 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 }, \"the row concedes twelve columns\")), 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 }, \"this does not follow the grid-column property\")))), 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
Item 6
\\n
Item 7
\\n
Item 8
\\n
\\n\")), mdx(\"p\", null, \"The code above shows the Tailwind grid class\"), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-cols-3 gap-4 text-center m-10 text-white font-extrabold \"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg \"\n }, \"Item 1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg \"\n }, \"Item 2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg \"\n }, \"Item 3\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"Item 4\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"Item 5\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"Item 6\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"Item 7\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"Item 8\")), mdx(\"h2\", null, \"Tailwind Grid Column Start/End\"), mdx(\"p\", null, \"You can control where an item starts and ends within the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-grid-column-start-end\"\n }, \"grid\"), \" using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"col-start-{n}\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"col-end-{n}\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
4
\\n
5
\\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-cols-12 gap-4 text-center text-white font-semibold\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-start-2 col-end-12\"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-start-4 col-end-12\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-start-6 col-end-12\"\n }, \"3\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-start-8 col-end-12\"\n }, \"4\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-start-10 col-end-12\"\n }, \"5\")), mdx(\"h3\", null, \"Spanning Columns\"), mdx(\"p\", null, \"To make an item span multiple columns, use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"col-span-{n}\"), \" class.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
4
\\n
5
\\n
6
\\n
7
\\n
8
\\n
9
\\n
10
\\n
11
\\n
12
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-cols-4 gap-4 font-mono text-center text-white font-bold m-10\"\n }, mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg \"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg\"\n }, \"3\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg\"\n }, \"4\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg\"\n }, \"5\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-span-2\"\n }, \"6\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg\"\n }, \"7\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-span-2\"\n }, \"8\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg \"\n }, \"9\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg col-span-4\"\n }, \"10\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg\"\n }, \"11\"), mdx(\"div\", {\n className: \"bg-blue-300 p-4 rounded-lg\"\n }, \"12\")), mdx(\"h3\", null, \"Equal Width\"), mdx(\"p\", null, \"Creating equal-width columns is straightforward with Tailwind. Just set the same fraction for each column.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-cols-3 gap-4 font-mono text-center text-white font-bold m-10\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-4 rounded-lg\"\n }, \"3\")), mdx(\"h2\", null, \"Tailwind Grid Template Rows\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Specifying the Rows in a Grid\")), mdx(\"p\", null, \"Similar to columns, you define rows with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid-rows-{n}\"), \". \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-grid-row\"\n }, \"Tailwind grid Template rows\"), \" are a class used to accept multiple values in tailwind CSS. Below are the different classes and properties of the Tailwind grid Template rows.\"), 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 }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://windframe.dev/classes/grid/grid-rows-1\"\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 }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://windframe.dev/classes/grid/grid-rows-2\"\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 }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"\"\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 }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://windframe.dev/classes/grid/grid-rows-4\"\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 }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"\"\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 }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://windframe.dev/classes/grid/grid-rows-6\"\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(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
4
\\n
5
\\n
6
\\n
7
\\n
8
\\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-rows-3 grid-flow-col gap-4 font-mono text-center text-white font-bold m-10\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"3\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"4\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"5\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"6\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"7\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg\"\n }, \"8\")), mdx(\"h2\", null, \"Tailwind Grid Row Start/End\"), mdx(\"p\", null, \"Control where an item starts and ends within \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-grid-row-start-end\"\n }, \"rows\"), \" using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/grid/row-start-2\"\n }, \"row-start-{n}\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/grid/row-end-13\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"row-end-{n}\")), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-rows-3 gap-3 grid-flow-col font-mono text-center text-white font-bold m-10\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg place-content-center row-start-3 row-end-4\"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg row-start-2 row-end-4 place-content-center\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg row-start-1 row-end-4 place-content-center\"\n }, \"3\")), mdx(\"h3\", null, \"Spanning Rows\"), mdx(\"p\", null, \"To span multiple rows, use the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/grid/row-span-full\"\n }, \"row-span-{n}\"), \" class.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-rows-4 gap-3 grid-flow-col font-mono text-center text-white font-bold m-10\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg row-span-3 place-content-center\"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg row-span-2 place-content-center\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-lg \"\n }, \"3\")), mdx(\"h2\", null, \"Tailwind Grid Auto Flow\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Controlling Grid Element Placement\")), mdx(\"p\", null, \"The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-grid-auto-flow\"\n }, \"grid-flow-{value}\"), \" class controls how items are placed in the grid. Options include row, col, dense, and row-dense.\\nFor finer control over element placement, you can combine the various start, end, and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/grid/row-span-4\"\n }, \"span\"), \" classes.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n \\n 1\\n
\\n
2
\\n
3
\\n
\\n 4\\n
\\n\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid grid-cols-4 gap-3 grid-flow-col font-mono text-center text-white font-bold m-10\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 col-start-1 col-span-2 row-start-1 row-span-2 p-3 rounded-md place-content-center\"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"3\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md col-span-4 row-start-1 row-span-2 place-content-center\"\n }, \"4\")), mdx(\"h2\", null, \"Tailwind Gap\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Setting the Gap Between Elements\")), mdx(\"p\", null, \"The gap-{size} class sets the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-gap\"\n }, \"gap\"), \" between grid items. Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gap-x-{size}\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gap-y-{size}\"), \" for independent control. Setting a uniform gap is as simple as using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gap-{size}\"), \" class.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
4
\\n
5
\\n
6
\\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid gap-4 grid-cols-3 text-center text-white font-bold font-mono \"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md \"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"3\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"4\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"5\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"6\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Changing Row and Column Gaps Independently\"), \"\\nFor different row and column gaps, use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gap-x-{size}\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gap-y-{size}\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
1
\\n
2
\\n
3
\\n
4
\\n
5
\\n
6
\\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"grid gap-x-2 gap-y-4 grid-cols-3 text-center text-white font-bold font-mono m-10\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md \"\n }, \"1\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"2\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"3\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"4\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"5\"), mdx(\"div\", {\n className: \"bg-blue-500 p-3 rounded-md\"\n }, \"6\")), mdx(\"h2\", null, \"Responsive Tailwind Grid\"), mdx(\"p\", null, \"Tailwind CSS Grid also allows you to add responsive breakpoints to your grid layout. This is useful when you want your grid to change its layout based on the screen size. Here is an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n \\n
1
\\n
2
\\n
3
\\n
4
\\n
5
\\n
6
\\n
7
\\n
8
\\n
\\n\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"m-10\"\n }, mdx(\"div\", {\n className: \"grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 text-center text-white font-mono font-bold\"\n }, mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"1\"), mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"2\"), mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"3\"), mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"4\"), mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"5\"), mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"6\"), mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"7\"), mdx(\"div\", {\n className: \"w-26 flex h-12 items-center justify-center rounded-md bg-blue-500\"\n }, \"8\"))), mdx(\"h2\", null, \"Customizing the Tailwind CSS Theme\"), mdx(\"p\", null, \"Tailwind CSS is highly customizable. You can extend or modify the default grid settings in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tailwind.config.js file\"), \". For example, to increase the maximum number of columns to 16:\"), mdx(\"p\", null, \"Example configuration:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"Copy code\\n// tailwind.config.js\\nmodule.exports = {\\n theme: {\\n extend: {\\n gridTemplateColumns: {\\n '16': 'repeat(16, minmax(0, 1fr))',\\n },\\n },\\n },\\n}\\n\")), mdx(\"p\", null, \"This adds the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"grid-cols-16\"), \" class, allowing you to create grids with up to 16 columns.\"), mdx(\"p\", null, \"Tailwind CSS Grid provides a flexible and powerful way to create responsive layouts. With its utility-first approach, you can easily define grid structures, manage spacing, and customize your design to fit your needs.\"), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"Tailwind CSS Grid is versatile and powerful, making complex layouts easier to manage. By mastering these classes, you can create responsive, flexible designs that are easy to maintain. With practice, Tailwind\\u2019s grid system will become an indispensable part of your web development toolkit.\"), mdx(\"h2\", null, \"Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://tailwindcss.com/docs/grid-template-columns\"\n }, \"Link to the Tailwind CSS grid Docs\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/\"\n }, \"Windframe\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to use Tailwind CSS Grid.","date":"January 10, 2023","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACa0lEQVQoz2O4e/30m2e35k6fsGHdip/fPvz//31yX8f+/XtW3brtsGKj59otHmtAyHPNFtfVm8M27brx9v2lV29PPXvpvmYLw/sH5/9/ejitu/7Ivs3//336////9KkTDuzfDWS0nThrt3y999qtnmDN7qs3B6zffvnNuzfff5x4/tJp5UaGN2+e/fj6Zvqkru7OlmuXz/7/92X6xO59e7YDNT/5/CVgww6XVZuAdrqt3gzUbL9iQ8WhE0eePM/afcgZqPnVnbO/39+fP7WTk4PdUEX28uFds2ZO3blz638wqD96Gqgtbtu+4E07gW4GotBNO82WrAWaAhRnePP46pdXdzrri61N9UOMFPZMaZ7c07Znx8b//38BNS+8ct13/faWE+eKDhwrPnis8vBJIDt0066YrXuAJMPTx7dePLlRXpwVHeKTYK89vy6/ta5i+5b1////Bmpefvma7/ptVYdPFu4/Wrj/WOquA0X7j1YcPlF28Hjklt0Mv1/f+PL8ZkJsnK21dW2sR0JUuLObz80bl///+/7t08epx095r9uWtutgKggdSN6xP3vP4YJ9R4M27HBetYlhYndTVHiwhoqSrZWZo52lgYG+np5BfX3D5auXd+zYmb5+qxM4tFxhCBh+QG3AwAOGP4OpsaGcpIiygoySvJSyvLS6irymsqyqpn5VY2ffzOmeKzd6AKNq7RYQAkeYJ4gLijxg5DMYqCvJSUsoykoqyEoqykmpKMrKSIvHBwXmZ+W7tHZ5btrtsXozJJ1gIobC9Cghfl5ZSTFpCREZSVGgflEh/rrS3MkHDzqu3OSJQxsEAQCDBXsf9nTZQAAAAABJRU5ErkJggg==","aspectRatio":1.7730496453900708,"src":"/static/db33532cd0e0be887f709d25b29b3d2f/a4bdf/css-grid-in-your-project.png","srcSet":"/static/db33532cd0e0be887f709d25b29b3d2f/84249/css-grid-in-your-project.png 250w,\n/static/db33532cd0e0be887f709d25b29b3d2f/a4bdf/css-grid-in-your-project.png 384w","sizes":"(max-width: 384px) 100vw, 384px"}}},"imageExternal":null,"lastUpdated":"24 JUNE 2024","author":"Emmanuel Chinonso","role":"Technical Writer/Web Developer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"How to use Tailwind CSS Grid.","metaDescription":"Tailwind Grid is a powerful and flexible system for building responsive and customizable grid layouts. With Tailwind CSS Grid, you can easily create complex grid structures and layouts without writing custom CSS.","previousTitle":" How to add tailwind CSS colors and Fonts to your project","previousPath":"how-to-add-tailwind-css-colors-and-fonts-to-your-project","nextTitle":"How to create a Beautiful Responsive Navigation bar Using Tailwind CSS","nextPath":"how-to-create-a-beautiful-responsive-navbar-using-tailwind-css","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-add-tailwind-css-grid-to-your-project/"}},"previous":null,"next":null},"pageContext":{"id":"d2c9ce01-4705-508f-9ff7-86046d787f2e"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}