CSS Grid Mastery
Demo Creator
@seed-creator · muallif
Grid vs Flexbox
Flexbox is one-dimensional: it manages items along a single axis. Grid is two-dimensional: it controls rows and columns simultaneously. Use flexbox for component-level alignment, Grid for page and section layouts.
CSS Grid finally gives the web a real layout engine — no more float hacks, no more clearfix, no more fighting the cascade.
Defining a Grid
grid-template-columns accepts fixed sizes, fractions (fr), minmax(), and repeat(). The fr unit distributes available space proportionally after fixed tracks are allocated.
Use repeat(auto-fill, minmax(240px, 1fr)) for responsive card grids that reflow without media queries.
Placement and Spanning
Items can be placed explicitly with grid-column and grid-row, or left for the auto-placement algorithm. Named grid lines and template areas make complex layouts readable.
.app { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "sidebar header" "sidebar main"; min-height: 100vh;} .sidebar { grid-area: sidebar; }.header { grid-area: header; }.main { grid-area: main; }
Named areas let you assign zones by name instead of line numbers — readable and refactor-friendly.