{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-place-items/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"ce9fc271-553c-5fa7-8371-0575ae4f8ad6","title":"Tailwind CSS Place-items","slug":"/classes/tailwind-place-items/"},"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\": \"13 May 2024\",\n \"title\": \"Tailwind CSS Place-items\",\n \"metaTitle\": \"Tailwind CSS Place-items\",\n \"metaDescription\": \"The place-items utility class in Tailwind CSS allows you to control the alignment and spacing of grid or flex container items both horizontally and vertically.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-place-items\"\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 Place Items\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"place-items\"), \" utility class in Tailwind CSS allows you to control the alignment and spacing of grid or flex container items both horizontally and vertically. With Tailwind's place-items class, you can easily position and align individual items within a container.\"), mdx(\"h2\", null, \"Applying Place Items\"), mdx(\"p\", null, \"To apply the alignment and spacing to individual items within a grid or flex container, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"place-items-{alignment}\"), \" utility class, where {alignment} represents the desired alignment. Here are the available alignment options:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"place-items-start: Aligns items to the start of both the horizontal and vertical axes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"place-items-end: Aligns items to the end of both the horizontal and vertical axes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"place-items-center: Aligns items to the center of both the horizontal and vertical axes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"place-items-stretch: Stretches items to fill the container along both axes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"place-items-auto: Applies automatic item placement, allowing items to be positioned based on their default placement rules.\")), 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 \\n
\\n\")), mdx(\"p\", null, \"In the above example, the items are aligned to the start of both axes by default (place-items-start), but starting from the medium breakpoint and above, the items are stretched to fill the container (md:place-items-stretch).\"), mdx(\"h2\", null, \"Tailwind Place-items 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 }, \"place-items-auto\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items: auto;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items-start\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items: start;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items-end\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items: end;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items-center\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items: center;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items-stretch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"place-items: stretch;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.windframe.dev/editor?id=footers2\"\n }, \"footer\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-place-items","title":"Tailwind Place Items","items":[{"url":"#applying-place-items","title":"Applying Place Items"},{"url":"#preview","title":"Preview"},{"url":"#responsive-place-items","title":"Responsive Place Items"},{"url":"#tailwind-place-items-class-table","title":"Tailwind Place-items Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-place-items.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Place-items","lastUpdated":"13 May 2024","metaDescription":"The place-items utility class in Tailwind CSS allows you to control the alignment and spacing of grid or flex container items both horizontally and vertically."}}},"pageContext":{"id":"ce9fc271-553c-5fa7-8371-0575ae4f8ad6"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}