This post na about CSS most powerful layout systems and e go long small, as I go try touch touch most of the important basics.
I been reason to write about this one onto say many many devs dey mostly confuse as per which one dem suppose use, where dem suppose use them and how dem go use them, or even if dem fit join them use. By the time wey you don digest this post finish, I hope say e go don clear for you. Oya make we burst enter am...!
Introduction & Why They Matter
Before CSS Flexbox and Grid, web devs been dey build layout using a collection of hacks: float, inline-blocks, table-display tricks, con still turn prayer warrior, pad am with prayer make everything for no scatter. But all these tools ba, their body no full for application layout, na document layout dem dey for, so friction dey steady dey dey, the layout no really dey smooth. To center element vertically fit take lines of code and constant Stack Overflow.
Now, when Flexbox first burst in around 2012, e come as a genuine layout tool - one-dimensional, flow-based and designed for aligning things for inside container. Grid follow am like 5 years later, for 2017, e carry two-dimensional layout control join body come. These two no only just improve CSS, dem replace the entire paradigm.
Understanding both systems in toto na one skill wey frontend developer fit to steady dey leverage on. Nearly every modern interface - navigation bars, card grids, dashboards, modals, sidebars - dey built with one, the other or both of them join together. Two of them gather dey work together through mama - pikin relationship: you go declare the kain layout mode on top the container (the mama) and na that one go determine how the pikin them go take arrange. Normally, nothing concern another man pikin for this arrangement/layout matter, na strictly family business except if dem call am join.
Before them born dem two (Flexbox and Grid), developers been dey use float wey dem suppose dey use wrap text around images, dem dey use am build columns. Dem go con dey use am with some other guys like clear and overflow: hidden make e for just work, position: absolute dey even comot elements from flow patapata, to get responsive design that time na real war, especially if you no add JavaScript. This kain thing been dey go on for over a decade. So, when Flexbox and Grid enter field, dem no just be any kain average players wey dem wan take boost squad, na galacticos dem be. The industry hand finally hammer confam tools.
CSS FLEXBOX: The One-Dimensional Layout System
Flexbox ehn, na pure layout module wey dem dey use distribute space and align items along a single axis at a time. That axis fit con be horizontal (row) or vertical (column), but e no fit be the two simultaneously. Na this single constraint separate am from Grid.
Even though say na one-way im be, Flexbox na oga for im own lane: dem dey take am dey align navigation items, center content for container, share space between elements, or take build component-level layout like cards and button groups.
To activate Flexbox, we go simply set display: flex or display: inline-flex for on top container element. That single declaration na im go transform the element into flex container, and all im direct pikin go automatically become flex items.
/* Native CSS */
/* Container element */
.container {
display: flex /* or inline-flex */
}
/* TailwindCSS */
class="flex "
The moment wey you write display: flex for container like this, three things ghas happen dole: the pikin go arrange "on a straight line" for row (flex-direction: row), the pikin no go enter new line (flex-wrap: nowrap), and the pikin go stretch make their hand for touch their mama head (fill the height).
Flex Container Properties
Na these properties na im dey control the mama and all im pikin as family. Dem be the axes, alignment rules, wrapping behavior, and distribution logic.
flex-direction
This one na e define the main axis - the direction wey the pikin go arrange.
/* Native CSS */
.container {
flex-direction: row; /* default: left to right */
flex-direction: row-reverse; /* right to left */
flex-direction: column; /* top to bottom */
flex-direction: column-reverse; /* bottom to top */
}
/* TailwindCSS */
class="flex flex-col flex-row(default) flex-row-reverse flex-col-reverse"
justify-content
This one na how the pikin dem go take align for the main axis. Mainly, na im go determine how dem go take share the space wey remain.
/* Native CSS */
.container {
justify-content: flex-start; /* [OOO ] */
justify-content: flex-end; /* [ OOO] */
justify-content: center; /* [ OOO ] */
justify-content: space-between; /* [O O O] */
justify-content: space-around; /* [ O O O ] */
justify-content: space-evenly; /* [ O O O ]*/
}
/* TailwindCSS */
class="justify-start justify-end justify-center justify-between justify-around justify-evenly"
align-items
This one na im cross the main axis (opposite of the flex-direction). So, if your flex na horizontal, na this one go control the vertical and vice versa.
/* Native CSS */
.container {
align-items: stretch; /* default: items fill cross axis height*/
align-items: flex-start; /* align to cross-start edge */
align-items: flex-end; /* align to cross-end edge */
align-items: center; /* center on cross axis */
align-items: baseline; /* align to baseline */
}
/* TailwindCSS */
class="items-stretch items-start items-end items-center items-baseline"
flex-wrap
By default, all the pikin go squeeze for one line. flex-wrap: wrap na im go tell them or give them the go ahead make dem enter new line if space no dey or e don dey too long. This one dey useful for responsive layouts.
/* Native CSS */
.container {
flex-wrap: nowrap; /* default: no wrap, may overflow */
flex-wrap: wrap; /* wrap to new lines, top to bottom */
flex-wrap: wrap-reverse; /* wrap to new lines, bottom to top */
}
/* shorthand for direction and wrap together */
.container {
flex-flow: row wrap;
flex-flow: column nowrap;
}
/* TailwindCSS */
class="flex-wrap flex-nowrap flex-wrap-reverse"
align-content
if you get may lines unto say the pikin dem dey fall enter another line, na this one go control how dem go take align for the new line for the cross axis. This one no get mouth at all assuming say dem no fall enter new line.
/* Native CSS */
.container {
flex-wrap: wrap; /* must wrap for align-content to work */
align-content: stretch; /* default */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: normal;
align-content: baseline;
}
/* TailwindCSS */
class="flex-wrap content-normal content-stretch content-center content-start content-end content-baseline content-between content-evenly content-around "
gap
This one na im create space between the pikin make dem for see place breathe. This na the preferred way to keep space between pikin dem, no margin, no nothing.
/* Native CSS */
.container {
display: flex;
gap: 1rem; /* equal row and column gap */
gap: 1rem 2rem; /* row-gap column-gap */
row-gap: 2rem; /* only horizontal */
column-gap: 2rem; /* only vertical */
}
/* TailwindCSS */
class="flex gap-2 gap-x-4 gap-y-4"
Flex Item Properties
While container properties dey control the group, na item properties na im dey in charge of individual items, so dem go fit control their own sizing, order and alignment - overriding the container's defaults for that specific element.
flex-grow, flex-shrink, flex-basis
Na these three musketeers dey determine how pikin dem dey size demsef.
/* Native CSS */
.item {
/* flex-grow : how much to grow relative to siblings */
flex-grow: 0; /* default: don't grow */
flex-grow: 1; /* grow to fill available space */
/* flex-shrink : how much to shrink if needed */
flex-shrink: 1; /* default: shrink proportionately */
flex-shrink: 0; /* don't shrink */
/* flex-basis : the starting size before grow/shrink */
flex-basis: auto; /* default: use content width */
flex-basis: 200px; /* start at 200px, then adjust */
flex-basis: 0; /* start from 0, all growth from flex-grow */
}
/* shorthand - flex: grow shrink basis */
.item {
flex: 1; /* flex: 1 1 0%; most common for equal-width items */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto; rigid, no grow or shrink */
flex: 0 0 200px; /* fixed 200px, no grow, no shrink */
}
/* TailwindCSS */
class="flex flex-grow shrink(flex-shrink: 1) shrink-0 basis-full basis-auto basis-sm basis-md basis-xl basis-1"
align-self
This one dey allow make one pikin position imsef as im like. This one go override align-items for that pikin only.
/* Native CSS */
.item {
align-self: flex-start; /* override: hug top */
align-self: flex-end; /* override: hug bottom */
align-self: center; /* override: vertically center */
align-self: auto; /* default: uses align-items value */
}
/* TailwindCSS */
class="self-start self-end self-center self-auto self-stretch self-baseline"
BONUS
To center an item
/* Native CSS */
.center-container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
min-height: 100vh; /* fill viewport */
}
/* TailwindCSS */
class="flex justify-center items-center"
CSS GRID: The Two-Dimensional Layout System
CSS Grid na the first CSS module wey dem design explicitly for two-dimensional layouts — rows and columns at the same time. As Flexbox dey wey im dey handle one axis, Grid dey handle the entire spatial plane. You go just define tracks, and items fit spread, collect multiple tracks for either direction.
Grid na the right tool for the general layout of a page: where the header, main content, sidebar, and footer dey gather live in relation to each other. Na im still be excellent option for image galleries, dashboards, and any pattern where item placement for both dimensions matters.
Activating Grid
/* Native CSS */
.container {
display: grid; /* or inline-grid */
}
/* TaiwindCSS */
class="grid "
/*
Without defining columns/rows, items stack vertically
by default — one per row, full width.
*/
Grid Container Properties
grid-template-columns & grid-template-rows
Na these properties dem dey take define the track sizes — the widths of columns and heights of rows.
/* Native CSS */
.grid {
display: grid;
/* Fixed pixels */
grid-template-columns: 200px 200px 200px;
/* Fractional units — the fr unit */
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-columns: 2fr 1fr; /* 2/3 and 1/3 */
grid-template-columns: 300px 1fr 1fr; /* fixed sidebar, 2 equal cols */
/* repeat() — shorthand for repeated tracks */
grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr */
grid-template-columns: repeat(4, 100px); /* four 100px cols */
/* minmax() — flexible range */
grid-template-columns: repeat(3, minmax(200px, 1fr));
/* Row heights */
grid-template-rows: 80px auto 60px; /* header, content, footer */
grid-template-rows: repeat(3, 150px);
}
/* TailwindCSS */
class="grid grid-cols-<number> grid-cols-[100px_minmax(200px,_1fr)_100px] grid-rows-6 "
The fr Unit
The fr (fraction) unit na im represent a fraction of the space wey remain for inside the grid container, after dem comot any track wey dem declare e size. Na wetin make am dey fundamentally different from percentages be that, as per say that one no dey regard gaps, e no send.
/* Native CSS */
.grid {
display: grid;
gap: 1rem;
/* 1. Three equal columns */
grid-template-columns: repeat(3, 1fr);
/* 2. Sidebar + main content */
grid-template-columns: 250px 1fr;
/* 3. Middle column twice as wide */
grid-template-columns: 1fr 2fr 1fr;
}
/* TailwindCSS */
class="grid gap-4 grid-cols-3 grid-cols-[1fr_2fr_1fr]"
auto-fill and auto-fit
Na these keywords we dey use with repeat() to create grids wey really dey responsive without say we declare any media queries.
/* Native CSS*/
.responsive-grid {
display: grid;
gap: 1rem;
/*
auto-fill: creates as many tracks as fit,
even if they're empty
*/
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/*
auto-fit: creates as many tracks as fit,
but collapses empty tracks to 0 width.
Items stretch to fill remaining space.
*/
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/*
auto-fit is usually what you want for card grids.
With 2 items in a 4-column layout:
- auto-fill: items are 200px, then empty columns remain
- auto-fit: items grow to fill the entire row
*/
/* TailwindCSS */
class="grid gap-4 grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
grid-template-areas
This na one of the features wey Grid get wey others no get: we fit give regions for the layout names, con dey use those names dey assign them items.
.page {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 160px;
grid-template-rows: 80px 1fr 60px;
min-height: 100vh;
gap: 1rem;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
/* Responsive: rearrange areas at small screens */
@media (max-width: 768px) {
.page {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
Alignment Properties
/* Native CSS */
.grid {
/* Aligns items on the BLOCK (vertical) axis within cells */
align-items: start | end | center | stretch;
/* Aligns items on the INLINE (horizontal) axis within cells */
justify-items: start | end | center | stretch;
/* Shorthand: align-items + justify-items */
place-items: center; /* both centered */
place-items: start end; /* block-axis inline-axis */
/* Aligning the entire grid within its container */
align-content: center;
justify-content: center;
place-content: center;
}
/* TailwindCSS */
class="grid items-center justify-items-start place-items-end content-center place-content-center"
Grid Placement & Spanning
Unlike Flexbox, where items dey follow one particular order, Grid allow you make you place items for anywhere inside the grid — out of order, overlapping, or say you wan spread am across multiple cells in any direction.
grid-column and grid-row
All these shorthand properties so, na dem specify where individual item fit start and where e fit end using grid line numbers. The lines dey numbered from 1 at the start of the grid go like that till the last line.
/* Native CSS */
/* Grid with 4 columns creates lines 1, 2, 3, 4, 5 */
.item {
grid-column: 1 / 3; /* start at line 1, end at line 3 (spans 2 cols) */
grid-column: 2 / -1; /* from line 2 to last line */
grid-column: 1 / span 2; /* start at 1, span 2 columns */
grid-column: span 3; /* span 3 cols from auto placement */
grid-row: 1 / 3; /* span 2 rows */
grid-row: span 2; /* span 2 rows from current position */
}
/* Individual properties */
.item {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
/* TailwindCSS */
class="grid col-span-2 col-span-auto col-start-auto col-span-full col-end-3 row-auto row-span-5 row-span-full row-span-auto row-end-5 "
Negative Line Numbers
You fit even arrange Grid lines from the back using negative numbers. -1 go be the last line and so on.
/* Native CSS */
.full-width {
grid-column: 1 / -1; /* always spans full width */
}
.right-two {
grid-column: -3 / -1; /* last two columns, always */
}
/* TailwindCSS */
class="col-start-1 col-end-[-1]"
Named Grid Lines
/* Native CSS */
.grid {
grid-template-columns:
[sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];
}
.sidebar { grid-column: sidebar-start / sidebar-end; }
.content { grid-column: content-start / content-end; }
/* TailwindCSS */
class="grid [grid-template-columns:[sidebar]_200px_[content]_1fr_[ads]_150px]"
class="[grid-column:sidebar] [grid-column:content]"
Grid Auto Placement & dense
/* Native CSS */
.grid {
grid-auto-flow: row; /* default — fills rows first */
grid-auto-flow: column; /* fills columns first */
grid-auto-flow: row dense; /* backfills gaps — great for masonry-like layouts */
}
/* Size for implicitly created tracks */
.grid {
grid-auto-rows: 200px;
grid-auto-rows: minmax(100px, auto);
grid-auto-columns: 1fr;
}
/* TailwindCSS */
class="grid-flow-row grid-flow-col grid-flow-col-dense"
Advanced Grid Techniques
Overlapping Items
Grid items fit to share the same cell(s) to create layered compositions. We go con use z-index take control how dem go take stack over each other.
/* Native CSS */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
}
/* Background image spans full grid */
.bg-image {
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: 1;
}
/* Text content placed over the image */
.overlay-text {
grid-column: 2 / 4;
grid-row: 2 / 3;
z-index: 2;
}
/* TailwindCSS */
class="grid grid-cols-4 grid-rows-3 "
class="col-span-1 row-span-1 z-10"
class="col-span-3 row-span-2 z-20"
Subgrid
Subgrid (widely supported since 2023) dey allow make grid item wey be say imself na grid container on e own, to align to im parent tracks, which means e allow the pikin make e inherit im mama columns or rows. This method na the solution to the long-standing problem of grid wey dey inside another grid wey no con fit align to im grandparent columns.
N.B: dey careful with am, e never dey fully supported for Chrome as at when I dey write this post.
/* Native CSS */
.parent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* A card that spans 3 columns and uses subgrid for its children */
.card {
grid-column: span 3;
display: grid;
grid-template-columns: subgrid; /* inherit parent's column tracks */
}
/* Card children now align to parent grid columns */
.card-icon { grid-column: 1; }
.card-title { grid-column: 2; }
.card-meta { grid-column: 3; }
/* TailwindCSS */
class="grid grid-cols-3 "
class="grid grid-cols-subgrid col-span-2 "
Flexbox & Grid Working Together
Flexbox and Grid no be competitors. Both of them dey solve different problems and dem dey very powerful if dem join hand together. The normal pattern na: Grid for macro layout, Flexbox for micro layout.
| Use Flexbox for... | Use Grid for... |
|---|---|
| Navigation bars | Page shell layouts |
| Button groups | Dashboard layouts |
| Card content alignment | Image galleries |
| Centering a single element | Magazine layouts |
| Toolbars and tag lists | Complex form grids |
| Horizontal scrolling strips | Any 2D layout problem |
Classic Combination: Page Shell + Component Layout
/* ── OUTER: Grid for page layout ── */
body {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* ── HEADER: Flex for nav layout ── */
header {
grid-area: header;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
}
/* ── MAIN: Grid for content area ── */
main {
grid-area: main;
display: grid;
grid-template-columns: 1fr 300px;
gap: 2rem;
padding: 2rem;
}
/* ── CARD GRID: Grid for cards ── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
/* ── CARD: Flex for card internals ── */
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push button to bottom */
}
/* ── FOOTER: Flex for footer content ── */
footer {
grid-area: footer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
}
The outer page na Grid. Each grid area con get Flex containers for internal alignment. Inside each card, flex-direction: column and flex: 1 wey dey their body dey make sure say the action button go always align for the bottom — regardless of content length.
Real-World Layout Patterns
Pattern 1: Responsive Sidebar Layout
.layout {
display: grid;
grid-template-columns: minmax(200px, 260px) 1fr;
gap: 2rem;
min-height: 100vh;
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr; /* sidebar stacks above content */
}
}
Pattern 2: 12-Column Dashboard Grid
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 1rem;
}
.stat-card { grid-column: span 3; } /* 4 across */
.chart-main { grid-column: span 8; } /* large chart */
.chart-small { grid-column: span 4; } /* small chart */
.data-table { grid-column: span 12; } /* full width */
/* Stat card internal layout — Flex */
.stat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
}
@media (max-width: 768px) {
.stat-card,
.chart-main,
.chart-small {
grid-column: span 12;
}
}
Pattern 3: Auto-Responsive Card Gallery (No Media Queries)
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 1rem;
}
/*
Adapts from 1 column on mobile to as many as fit,
never below 280px wide, all equal width — no breakpoints.
*/
Pattern 4: The Pancake Stack
.pancake {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/*
Header and footer are natural height.
Main content grows to fill remaining space.
*/
Pattern 5: Pseudo-Masonry with dense
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 50px;
grid-auto-flow: dense; /* fill gaps */
gap: 0.5rem;
}
.tall { grid-row: span 4; }
.short { grid-row: span 2; }
.wide { grid-column: span 2; }
/*
Note: true masonry is in the CSS spec as
grid-template-rows: masonry
but browser support is currently limited.
*/
Tailwind CSS Reference
Tailwind Flexbox Classes
<!-- Display -->
<div class="flex"> <!-- display: flex -->
<div class="inline-flex"> <!-- display: inline-flex -->
<!-- flex-direction -->
class="flex-row" <!-- flex-direction: row (default) -->
class="flex-row-reverse" <!-- flex-direction: row-reverse -->
class="flex-col" <!-- flex-direction: column -->
class="flex-col-reverse" <!-- flex-direction: column-reverse -->
<!-- flex-wrap -->
class="flex-wrap" <!-- flex-wrap: wrap -->
class="flex-nowrap" <!-- flex-wrap: nowrap -->
class="flex-wrap-reverse" <!-- flex-wrap: wrap-reverse -->
<!-- justify-content -->
class="justify-start" <!-- justify-content: flex-start -->
class="justify-end" <!-- justify-content: flex-end -->
class="justify-center" <!-- justify-content: center -->
class="justify-between" <!-- justify-content: space-between -->
class="justify-around" <!-- justify-content: space-around -->
class="justify-evenly" <!-- justify-content: space-evenly -->
<!-- align-items -->
class="items-start" <!-- align-items: flex-start -->
class="items-end" <!-- align-items: flex-end -->
class="items-center" <!-- align-items: center -->
class="items-baseline" <!-- align-items: baseline -->
class="items-stretch" <!-- align-items: stretch -->
<!-- align-content (multi-line) -->
class="content-center" <!-- align-content: center -->
class="content-between" <!-- align-content: space-between -->
<!-- Item properties -->
class="flex-1" <!-- flex: 1 1 0% -->
class="flex-auto" <!-- flex: 1 1 auto -->
class="flex-none" <!-- flex: none -->
class="grow" <!-- flex-grow: 1 -->
class="grow-0" <!-- flex-grow: 0 -->
class="shrink" <!-- flex-shrink: 1 -->
class="shrink-0" <!-- flex-shrink: 0 -->
class="basis-1/3" <!-- flex-basis: 33.333% -->
class="self-center" <!-- align-self: center -->
class="order-first" <!-- order: -9999 -->
class="order-last" <!-- order: 9999 -->
class="order-3" <!-- order: 3 -->
<!-- Gap -->
class="gap-4" <!-- gap: 1rem -->
class="gap-x-4" <!-- column-gap: 1rem -->
class="gap-y-2" <!-- row-gap: 0.5rem -->
Tailwind Flexbox Examples
<!-- Navbar: logo left, links center, button right -->
<nav class="flex items-center justify-between px-8 py-4">
<a class="font-bold text-xl">Brand</a>
<ul class="flex gap-6">
<li><a>Home</a></li>
<li><a>About</a></li>
</ul>
<button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded">
Sign Up
</button>
</nav>
<!-- Card with flex-col to push button to bottom -->
<div class="flex flex-col h-full p-4 border rounded">
<h3 class="text-lg font-semibold mb-2">Card Title</h3>
<p class="flex-1 text-gray-600">Card body content...</p>
<button class="mt-4 bg-red-500 text-white px-3 py-1.5 text-sm">
Read More
</button>
</div>
<!-- Perfect centering -->
<div class="flex items-center justify-center min-h-screen">
<div>Centered content</div>
</div>
<!-- Sticky footer -->
<body class="flex flex-col min-h-screen">
<header>...</header>
<main class="flex-1">...</main>
<footer>...</footer>
</body>
Tailwind Grid Classes
<!-- Display -->
class="grid" <!-- display: grid -->
class="inline-grid" <!-- display: inline-grid -->
<!-- grid-template-columns -->
class="grid-cols-1" <!-- repeat(1, minmax(0,1fr)) -->
class="grid-cols-2" <!-- repeat(2, minmax(0,1fr)) -->
class="grid-cols-3" <!-- repeat(3, minmax(0,1fr)) -->
class="grid-cols-12" <!-- 12-column grid -->
class="grid-cols-none" <!-- no predefined columns -->
<!-- grid-template-rows -->
class="grid-rows-3" <!-- 3 equal rows -->
class="grid-rows-none" <!-- auto rows -->
<!-- Column/Row spanning -->
class="col-span-1" <!-- grid-column: span 1 -->
class="col-span-2" <!-- grid-column: span 2 -->
class="col-span-full" <!-- grid-column: 1 / -1 -->
class="row-span-2" <!-- grid-row: span 2 -->
class="row-span-full" <!-- grid-row: 1 / -1 -->
<!-- Column/Row start and end -->
class="col-start-1" <!-- grid-column-start: 1 -->
class="col-end-4" <!-- grid-column-end: 4 -->
class="row-start-2" <!-- grid-row-start: 2 -->
<!-- Alignment -->
class="justify-items-center" <!-- justify-items: center -->
class="items-center" <!-- align-items: center -->
class="place-items-center" <!-- place-items: center -->
class="place-content-center" <!-- place-content: center -->
class="justify-self-end" <!-- justify-self: end -->
<!-- Auto flow -->
class="grid-flow-row" <!-- grid-auto-flow: row -->
class="grid-flow-col" <!-- grid-auto-flow: column -->
class="grid-flow-dense" <!-- grid-auto-flow: dense -->
class="grid-flow-row-dense" <!-- grid-auto-flow: row dense -->
Tailwind Grid Examples
<!-- Responsive card grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div class="...">Card</div>
<!-- more cards -->
</div>
<!-- 12-column dashboard -->
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-3">Sidebar</div>
<div class="col-span-12 md:col-span-9">Main</div>
</div>
<!-- Feature article: full-width hero + 3 cols below -->
<div class="grid grid-cols-3 gap-4">
<div class="col-span-full bg-slate-100 h-48">Hero</div>
<div>Story 1</div>
<div>Story 2</div>
<div>Story 3</div>
</div>
<!-- Custom column sizes with arbitrary values -->
<div class="grid [grid-template-columns:250px_1fr] gap-6">
<aside>Sidebar</aside>
<main>Content</main>
</div>
<!-- grid-template-areas with arbitrary values -->
<div class="grid
[grid-template-areas:'header_header''nav_main''footer_footer']
[grid-template-columns:200px_1fr]">
<header class="[grid-area:header]">Header</header>
<nav class="[grid-area:nav]">Nav</nav>
<main class="[grid-area:main]">Main</main>
<footer class="[grid-area:footer]">Footer</footer>
</div>
When to Use Which
| Scenario | Flexbox | Grid |
|---|---|---|
| Navigation bar | Ideal | Overkill |
| Page shell layout | Possible but awkward | Ideal |
| Card grids | Works with wrapping | More precise control |
| Centering one element | 2 lines of CSS | Works with place-items
|
| Items of unknown count |
flex-wrap handles it |
auto-fill/fit also works |
| Items must align in 2 axes | One axis only | Native two-dimensional |
| Items overlapping | Not designed for this | Explicit placement allows overlap |
| Form label + input pairs | Row with flex-wrap
|
grid-template-columns aligns |
| Sidebar layout | Possible | More readable |
| Content-driven sizing | Items size to content | Possible with min/max-content
|
| Complex magazine layout | Can't span rows | Built for this |
| Equal-height cards | align-items: stretch |
Row tracks handle this |
| Sticky footer |
flex-col + flex:1 on main |
grid-rows: auto 1fr auto |
The Definitive Rule: If you get layout wey be say na one-dimensional (a row of things, or a column of things), just use Flexbox. If e con be say the layout need better control for both rows and columns simultaneously, or if you need make items spread for multiple rows or columns, carry Grid use. If you dey doubt am, say you be doubting Thomas, just use Grid for the outer structure and then use Flexbox for the inner components.
Pro Tips & Common Mistakes
Common Flexbox Mistakes
/* Mistake: using margin instead of gap */
.container { display: flex; }
.item { margin-right: 1rem; } /* last item go get extra margin */
/* Fix: Use gap */
.container { display: flex; gap: 1rem; }
/* Mistake: You go dey expect say flex go work on grandchildren */
.parent { display: flex; }
.child { } /* flex item */
.grandchild { } /* Not a flex item */
/* Fix: Make .child a flex container too if e really need am */
.child { display: flex; }
/* Mistake: align-items vs align-content confusion */
.container {
flex-wrap: wrap;
align-items: center; /* centers items within each row */
align-content: center; /* centers all rows in the container */
/* If you wan wrap, then both of them dey needed for full vertical centering */
}
/* Mistake: Text dey overflow im flex item */
.text-item { flex: 1; }
/* Fix: flex items dey get min-width:auto by default */
.text-item { flex: 1; min-width: 0; overflow: hidden; }
Common Grid Mistakes
/* Mistake: Using % instead of fr (% no dey consider gap) */
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 33.33% 33.33% 33.33%;
}
/* Fix: Use fr */
.grid { grid-template-columns: 1fr 1fr 1fr; }
/* Mistake: Forgetting grid-auto-rows with auto-placement */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* rows go default to height of content, most times na 0px */
}
/* Fix: Explicitly set row height */
.grid { grid-auto-rows: minmax(150px, auto); }
/* Mistake: Mismatched grid-area names */
.page {
grid-template-areas:
"header header"
"sidebar main";
}
aside { grid-area: side; } /* "side" no match "sidebar" */
/* Fix: Names ghas match exactly */
aside { grid-area: sidebar; }
Pro Tips Worth Remembering
| Tip | Detail |
|---|---|
gap > margin |
Always use gap for spacing between grid/flex children. |
min-width: 0 |
When flex item get content wey dey pass im boundary, add min-width: 0 so e go fit shrink properly. |
aspect-ratio + Grid |
Combine aspect-ratio: 1 with Grid if you want image galleries wey go maintain proportions for any kain size. |
fr over % |
The fr unit dey share space after fixed tracks and gaps don dey accounted for. Percentage no send. |
| DevTools first | Chrome and Firefox get better Grid and Flex visualizers. Use them if you dey debug — dem go show line numbers, area names, and track sizes. |
place-* shorthand |
place-items: center and place-content: center combine align + justify in one declaration. |
| Zero query responsive | Use auto-fit/fill with minmax() if you want card grids wey go adapt to any screen width. No need for media queries. |
| Don't force one tool | If e don dey be like say you dey force either of the system, you fit consider say na the wrong one you dey use. The right tool no go stress you, e go make am easy, con sweet you. |
Final Thought: Mastering Flexbox and Grid no be about memorizing every property. The main thing na to always get which one you wan use for mind, and trust say once you don pick the right one, CSS go handle the remaining. Build things. Break am. Inspect am for DevTools. The layout systems for modern CSS use style sweet once you don enter inside am. Happy Styling!
Cheers!🥂
Top comments (0)