Flexbox versus Grid
Flexbox arranges items in one direction. Grid works in two dimensions, rows and columns together, which suits whole-page layouts and card galleries.
Basic grid
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid div { background: #ede9fe; padding: 24px; border-radius: 10px; text-align: center; }
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>display: gridturns on grid.grid-template-columnsdefines columns.1frmeans one fraction of the free space.gapadds space between cells.
Responsive card grid without media queries
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}Cards are at least 240px wide, and the browser fits as many as possible per row.
Spanning cells
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }Page layout with named areas
<style>
.page { display: grid; grid-template-columns: 200px 1fr; grid-template-areas: "header header" "side main" "footer footer"; gap: 10px; min-height: 220px; }
.page > * { padding: 12px; border-radius: 8px; }
header { grid-area: header; background: #dbeafe; }
aside { grid-area: side; background: #fef3c7; }
main { grid-area: main; background: #dcfce7; }
footer { grid-area: footer; background: #fee2e2; }
</style>
<div class="page"><header>Header</header><aside>Sidebar</aside><main>Main</main><footer>Footer</footer></div>Practice
Build a photo gallery with auto-fit columns and one featured image that spans two columns.