CSS Grid Basics

Welcome to CSS Grid!

CSS Grid is like having graph paper for web layouts. While Flexbox is great for one-dimensional layouts (rows OR columns), Grid excels at two-dimensional layouts (rows AND columns). Think of it as creating a blueprint for your content!

Grid Terminology

• Grid Container: The parent element with display: grid
• Grid Items: Direct children of the grid container
• Grid Lines: The dividing lines that make up the grid structure
• Grid Tracks: The space between two adjacent grid lines (rows or columns)
• Grid Cell: The intersection of a row and column
• Grid Area: One or more grid cells that form a rectangular area

Creating a Grid Container

/* Create a grid container */
.container {
    display: grid;
}

/* Inline grid container */
.inline-container {
    display: inline-grid;
}

Defining Grid Structure

/* Define columns and rows */
.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
}

/* Using repeat() function */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 100px);
}

/* Using fr units (fractional) */
.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px auto;
}

/* Using minmax() */
.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

/* Using auto-fit and auto-fill */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Grid Gaps

/* Old syntax (still works) */
.grid {
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    /* or shorthand */
    grid-gap: 20px;
}

/* Modern syntax */
.grid {
    row-gap: 20px;
    column-gap: 20px;
    /* or shorthand */
    gap: 20px;
    
    /* Different values for row and column */
    gap: 20px 30px;
}

Positioning Grid Items

Grid Lines

/* Positioning by grid lines */
.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

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

/* Span notation */
.item {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}

/* Negative line numbers (from end) */
.item {
    grid-column: 1 / -1; /* Full width */
}

Grid Areas

/* Using grid-area shorthand */
.item {
    /* row-start / column-start / row-end / column-end */
    grid-area: 1 / 1 / 2 / 3;
}

Named Grid Lines and Areas

Named Lines

.grid {
    display: grid;
    grid-template-columns: [start] 200px [content-start] 1fr [content-end] 200px [end];
    grid-template-rows: [header] 100px [main] 1fr [footer] 100px;
}

.header {
    grid-column: start / end;
    grid-row: header;
}

.content {
    grid-column: content-start / content-end;
    grid-row: main;
}

Template Areas

.grid {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.aside {
    grid-area: aside;
}

.footer {
    grid-area: footer;
}

/* Create gaps with dots */
.grid-with-gaps {
    grid-template-areas:
        "header header header"
        "sidebar . aside"
        "footer footer footer";
}

Grid Auto Placement

/* Control auto-placement direction */
.grid {
    grid-auto-flow: row;    /* Default: fill rows first */
    grid-auto-flow: column; /* Fill columns first */
    grid-auto-flow: dense;  /* Fill gaps */
    grid-auto-flow: row dense; /* Combine behaviors */
}

/* Define size of implicit tracks */
.grid {
    grid-auto-rows: 100px;
    grid-auto-columns: 100px;
    
    /* Multiple track sizes */
    grid-auto-rows: minmax(100px, auto);
}

Alignment in Grid

Container Alignment

/* Justify items (horizontal in ltr) */
.grid {
    justify-items: start;
    justify-items: end;
    justify-items: center;
    justify-items: stretch; /* Default */
}

/* Align items (vertical in ltr) */
.grid {
    align-items: start;
    align-items: end;
    align-items: center;
    align-items: stretch; /* Default */
}

/* Shorthand for both */
.grid {
    place-items: center; /* align-items justify-items */
}

/* Justify/align content (when grid is smaller than container) */
.grid {
    justify-content: start;
    justify-content: end;
    justify-content: center;
    justify-content: stretch;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    
    align-content: start;
    /* ... same values as justify-content */
    
    /* Shorthand */
    place-content: center;
}

Item Alignment

/* Individual item alignment */
.item {
    justify-self: start;
    align-self: end;
    
    /* Shorthand */
    place-self: center;
}

Responsive Grid Patterns

Auto-Fit vs Auto-Fill

/* Auto-fit: Collapses empty tracks */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Auto-fill: Keeps empty tracks */
.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

Responsive Layout with Media Queries

/* Mobile first approach */
.grid {
    display: grid;
    gap: 20px;
    grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
}

/* Tablet */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: 200px 1fr 200px;
        grid-template-areas:
            "header header header"
            "sidebar main aside"
            "footer footer footer";
    }
}

Common Grid Patterns

Holy Grail Layout

.holy-grail {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 200px;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    gap: 20px;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

/* Responsive */
@media (max-width: 768px) {
    .holy-grail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

Card Grid

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Featured card */
.card.featured {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 768px) {
    .card.featured {
        grid-column: span 1;
        grid-row: span 1;
    }
}

Magazine Layout

.magazine {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 20px;
}

.article {
    background: white;
    padding: 20px;
}

.article--featured {
    grid-column: span 4;
    grid-row: span 3;
}

.article--medium {
    grid-column: span 2;
    grid-row: span 2;
}

.article--small {
    grid-column: span 2;
    grid-row: span 1;
}

Advanced Grid Techniques

Subgrid

/* Parent grid */
.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 20px;
}

/* Child uses parent's grid */
.child {
    display: grid;
    grid-column: span 2;
    grid-row: span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

Masonry Layout (Future)

/* Masonry layout (limited browser support) */
.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: masonry;
    gap: 20px;
}

Grid vs Flexbox

When to Use Grid vs Flexbox

• Use Grid when:
  • You need to control both rows and columns
  • You want to create complex layouts
  • You need to overlap items
  • You want precise placement
• Use Flexbox when:
  • You're laying out items in one direction
  • You need flexible, content-based sizing
  • You want to align items within a container
  • You're building navigation or toolbars

Grid Inspector Tools

Modern browsers provide excellent Grid inspection tools:

• Firefox Grid Inspector: Shows grid lines, areas, and gaps
• Chrome DevTools: Grid overlay and area names
• Visual debugging with numbered lines
• Area name visualization

Best Practices