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