CSS Grid Demo

1. Basic Grid - 3 Equal Columns

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

The fr unit means "fraction of available space"

2. Mixed Column Sizes

grid-template-columns: 200px 1fr 1fr;

First column is fixed, rest share remaining space

3. Using repeat()

grid-template-columns: repeat(4, 1fr);
/* Same as: 1fr 1fr 1fr 1fr */

4. Responsive Grid with auto-fit

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Resize the browser to see items automatically reflow! Minimum 200px, maximum 1fr.

5. Explicit Row Heights

grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 150px 100px;

6. Grid Spanning

.span-2-cols { grid-column: span 2; }
.span-2-rows { grid-row: span 2; }
.span-both {
    grid-column: span 2;
    grid-row: span 2;
}

7. Named Grid Areas

grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

8. Practical Example: Image Gallery

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    gap: 10px;
}
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }

Key Grid Properties Summary