š§± CSS Grid ā The Ultimate Layout System for the Web
CSS Grid is a powerful 2-dimensional layout system in CSS. It lets you design complex web layouts by dividing a page into rows and columns, with precise control over placement, sizing, and responsiveness.
šÆ Use Grid when you need full control over both rows and columns.
š Why Use CSS Grid?
| Feature | Benefit |
|---|---|
| š 2D layout | Control both rows & columns |
| ā” Easy alignment | Place items anywhere |
| š± Responsive-friendly | Auto reflow with media queries |
| š„ Clean markup | No floats, no hacks, no position traps |
Ā
š§± Basic Grid Setup
Result: 3 equal columns with 20px gap.
š Defining Columns and Rows
Units you can use:
px,em,%ā Fixed or relativefrā Fraction of available spaceautoā Size to contentminmax(min, max)ā Responsive sizing
š Positioning Items
Named grid lines:
Or shorthand:
š§ Grid Auto Placement
Donāt need to manually place everything:
ā This creates a responsive grid that auto-adjusts columns based on screen size.
š Grid Gap
Or:
š§© Named Areas (Optional)
š§ CSS Grid vs Flexbox
| Feature | Grid | Flexbox |
|---|---|---|
| Layout | 2D (rows + columns) | 1D (row or column) |
| Use Case | Page layouts | Navbars, cards |
| Auto placement | Powerful | More manual |
| Complexity | More control | Easier for small UI parts |
Ā
šÆ Real-World Use Cases
Responsive blog layouts
Image galleries
Complex dashboards
Admin panels
Product listings
š Resources
š MDN: CSS Grid
š® CSS Grid Garden Game
ā Summary
| Property | Use |
|---|---|
display: grid | Enable grid |
grid-template-columns | Define columns |
grid-template-rows | Define rows |
grid-area, grid-column, grid-row | Position items |
gap, row-gap, column-gap | Add spacing |
grid-template-areas | Name and arrange sections |
