CSS Grid Tutorial

What is CSS Grid?

CSS Grid Layout is a two‑dimensional system that lets you create complex, responsive layouts with rows and columns.

Basic Grid

1
2
3
4
5
6
.grid-container{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
}

Interactive Grid Builder

grid-template-columns: repeat(var(--cols), 1fr);
grid-template-rows: repeat(var(--rows), 1fr);
gap: var(--gap)px;

Named Grid Areas

Header
Sidebar
Main Content
.container{
    display:grid;
    grid-template-columns:200px 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
}