Tailwind CSS utilities for placing items.
Instead of
grid place-items-center
, dogrid-center
grid place-items-start
, dogrid-start
grid place-items-end
, dogrid-end
grid place-items-stretch
, dogrid-stretch
This does more than "centering" items but named as @downwindcss/grid-center
to match existing flex utility @downwindcss/flex-center.
npm install @downwindcss/grid-center
# using Yarn
yarn add @downwindcss/grid-center
# with PNPM
pnpm install @downwindcss/grid-center
In your Tailwind CSS configuration file, tailwindcss.config.js, add the plugin after following the installation step above.
module.exports = {
plugins: [require('@downwindcss/grid-center')]
}
Only responsive variant is enabled by default.
Same as place-items-*
utility: https://tailwindcss.com/docs/place-items#variants
Demo: https://codesandbox.io/s/grid-center-demo-s7puu?file=/public/index.html
<article>
<h2 class="text-center py-8 text-4xl font-semibold">grid-center</h2>
<!-- 👇 -->
<div class="grid-center grid-cols-3 gap-2 h-48 w-full">
<!-- list of divs... -->
</div>
</article>
<article>
<h2 class="text-center py-8 text-4xl font-semibold">grid-center</h2>
<!-- 👇 -->
<div class="grid-start grid-cols-3 gap-2 h-48 w-full">
<!-- list of divs... -->
</div>
</article>
<article>
<h2 class="text-center py-8 text-4xl font-semibold">grid-center</h2>
<!-- 👇 -->
<div class="grid-end grid-cols-3 gap-2 h-48 w-full">
<!-- list of divs... -->
</div>
</article>
<article>
<h2 class="text-center py-8 text-4xl font-semibold">grid-center</h2>
<!-- 👇 -->
<div class="grid-stretch grid-cols-3 gap-2 h-48 w-full">
<!-- list of divs... -->
</div>
</article>
A reddit user, u/tortus left a (comment) for grid place-items-center
.