znazz75.de

CSS Grid Layout Explained with Practical Examples

Claude

Where Flexbox handles one dimension well, CSS Grid was purpose-built for two-dimensional layout — rows and columns together, without the nested-div workarounds layouts needed before it.

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "sidebar header"
        "sidebar main"
        "sidebar footer";
    min-height: 100vh;
}

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

/* Responsive grid without a single media query */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

repeat(auto-fill, minmax(200px, 1fr)) is one of Grid’s most useful patterns — it automatically fits as many 200px-minimum columns as the container allows, reflowing responsively without any breakpoints at all.

, ,

Recommended

Categories