CSS Grid Complete Guide

CSS Grid is the most powerful layout system in CSS. Let's master it together.

Basic Grid Setup

Create a grid container:

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

Defining Columns and Rows

Use various units:

.grid {
 grid-template-columns: 200px 1fr 2fr;
 grid-template-rows: auto 100px auto;
}

/* Repeat function */
.grid {
 grid-template-columns: repeat(4, 1fr);
}

/* Responsive with minmax */
.grid {
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Placing Items

Control item placement:

.item {
 grid-column: 1 / 3; /* Spans columns 1-2 */
 grid-row: 1 / 2;
}

/* Shorthand */
.item {
 grid-area: 1 / 1 / 2 / 3;
}

Named Grid Areas

Create intuitive layouts:

.container {
 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; }

Alignment

Align items within the grid:

.container {
 justify-items: center; /* Horizontal */
 align-items: center; /* Vertical */

 /* Or both at once */
 place-items: center;
}

/* Align individual items */
.item {
 justify-self: end;
 align-self: start;
}

Responsive Grid

Grid adapts beautifully to screen sizes:

.container {
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 768px) {
 .container {
 grid-template-columns: 1fr;
 }
}

Real-World Example: Blog Layout

.blog-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 2rem;
}

.featured-post {
 grid-column: 1 / -1;
}

Conclusion

CSS Grid makes complex layouts simple. Practice these patterns and you'll build beautiful layouts with ease.