Interactive CSS Grid Tutorial

1. What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out content in rows and columns, making it easy to design complex responsive web pages. Unlike Flexbox, which is primarily one-dimensional (row or column), Grid allows you to control both dimensions simultaneously.

To start using Grid, you simply set display: grid; on a container element.

.grid-container {
    display: block; /* Initial state */
}
.grid-item {
    /* Basic styling */
}
            

2. Defining Columns and Rows

The grid-template-columns and grid-template-rows properties allow you to define the structure of your grid. You can use various units like px, %, em, rem, or the flexible fr unit.

The fr unit represents a fraction of the available space. For example, 1fr 2fr 1fr means the middle column will be twice as wide as the first and third.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
}
            

3. Grid Gaps

The gap property (shorthand for row-gap and column-gap) creates space between grid cells. You can define both row and column gaps, or use the shorthand for uniform gaps.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* Initial gap */
}
            

4. Spanning Cells

grid-column and grid-row properties allow grid items to span across multiple columns or rows. You can specify the start and end lines, or use the span keyword.

Example: grid-column: 1 / 3; or grid-column: span 2;

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 1rem;
}
.grid-item-A {
    /* No span initially */
}
            

5. Named Grid Areas

grid-template-areas allows you to define named areas in your grid, making complex layouts more readable and maintainable. You then assign items to these areas using the grid-area property.

A period (.) denotes an empty cell.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-rows: auto 150px auto;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    gap: 0.5rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
            

6. Alignment

Grid offers powerful alignment properties for both grid items within their cells and the grid content within the container.

• justify-items: Aligns items along the row (inline) axis within their cells.
• align-items: Aligns items along the column (block) axis within their cells.
• justify-content: Aligns the grid itself along the row (inline) axis within the grid container.
• align-content: Aligns the grid itself along the column (block) axis within the grid container.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Fixed size for content alignment demo */
    grid-template-rows: repeat(2, 80px);
    gap: 0.5rem;
    height: 256px; /* Fixed height for content alignment demo */
    justify-items: stretch;
    align-items: stretch;
    justify-content: start;
    align-content: start;
}
            

7. Implicit vs. Explicit Grid

The explicit grid is what you define with grid-template-columns and grid-template-rows. The implicit grid is created when you place items outside of the explicit grid, or when there are more items than defined tracks.

You can control the size of implicit tracks using grid-auto-columns and grid-auto-rows.

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Explicitly 2 columns */
    grid-auto-rows: 100px; /* Implicit row height */
    gap: 1rem;
}
/* Items added beyond explicit grid will form implicit rows */
            

8. `auto-fill` vs. `auto-fit`

These keywords are used with repeat() and minmax() to create flexible, responsive grids.

• auto-fill: Fills the row with as many columns as possible, even if there are no items to fill them (creating empty tracks).
• auto-fit: Behaves like auto-fill, but collapses empty tracks if there are not enough items to fill them.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Initial state */
    gap: 1rem;
}
            

9. `minmax()` Function

The minmax(min, max) function defines a size range greater than or equal to min and less than or equal to max. It's incredibly useful for creating flexible columns/rows that don't shrink below a certain size or grow beyond another.

Commonly used with auto-fill/auto-fit and repeat().

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Initial state */
    gap: 1rem;
}
            

10. `repeat()` Function

The repeat() function simplifies the process of creating multiple columns or rows with the same size. Instead of writing 1fr 1fr 1fr, you can write repeat(3, 1fr).

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Initial state */
    gap: 1rem;
}