Introduction to CSS Grid

CSS Grid Layout, often simply called "Grid," is a two-dimensional layout system for the web. It allows you to arrange content into columns and rows, providing precise control over the positioning and sizing of elements on a page. Unlike Flexbox, which is primarily a one-dimensional layout system (either rows OR columns), Grid excels at creating complex, overlapping, or non-linear layouts.

Grid is perfect for designing the overall structure of a page, such as headers, footers, sidebars, and main content areas, making it a powerful tool for modern web design.

Grid Container and Grid Items

To use CSS Grid, you first define a **grid container** by setting its display property to grid or inline-grid. All direct children of this container automatically become **grid items**.

<!-- HTML Structure -->
<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
</div>

/* CSS */
.grid-container {
    display: grid;
}

Defining Grid Tracks: Columns and Rows

Once you have a grid container, you define the grid's structure using the grid-template-columns and grid-template-rows properties.

grid-template-columns

Specifies the size and number of columns. You can use fixed units (px, em, rem), percentages (%), or the flexible `fr` unit.

/* Three columns, 100px, 1fr, 2fr */
.grid-container-cols {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    gap: 10px; /* Spacing between grid cells */
}

grid-template-rows

Specifies the size and number of rows. Works similarly to `grid-template-columns`.

/* Two rows, 50px and auto (content-based height) */
.grid-container-rows {
    display: grid;
    grid-template-rows: 50px auto;
    grid-template-columns: 1fr 1fr; /* Need columns for items to sit in */
    gap: 10px;
}

gap (or grid-gap)

Defines the space between grid cells (rows and columns). It's a shorthand for `grid-row-gap` and `grid-column-gap`.

.grid-container-gap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* 20px space between both rows and columns */
}

Placing Grid Items

You can explicitly place grid items using line numbers or named grid areas.

grid-column and grid-row

These properties define an item's start and end position within the grid.

• grid-column-start / grid-column-end
• grid-row-start / grid-row-end
• Shorthands: grid-column: start-line / end-line; and grid-row: start-line / end-line;
• Use span N to make an item span N tracks.

.grid-container-placement {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 100px;
    gap: 10px;
}
.item-span {
    grid-column: 1 / span 2; /* Starts at line 1, spans 2 columns */
    grid-row: 1; /* Stays in the first row */
    background-color: var(--primary-color);
    color: white;
    padding: 15px;
}

Alignment in Grid

Grid offers powerful alignment properties, similar to Flexbox, but adapted for a 2D context.

• **justify-items**: Aligns grid items along the **inline (row)** axis within their cells.
• **align-items**: Aligns grid items along the **block (column)** axis within their cells.
• **place-items**: Shorthand for align-items and justify-items.

These properties are applied to the **grid container**.

.grid-container-align-items {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Fixed width columns for demonstration */
    grid-template-rows: 80px;
    gap: 5px;
    justify-items: center; /* Centers items horizontally in their cells */
    align-items: end; /* Aligns items to the bottom of their cells */
    border: 1px solid #ccc;
    padding: 10px;
}

There are also properties to align the entire grid tracks within the container if there's extra space:

• **justify-content**: Aligns grid tracks along the **inline (row)** axis.
• **align-content**: Aligns grid tracks along the **block (column)** axis.
• **place-content**: Shorthand for align-content and justify-content.

.grid-container-align-content {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(2, 50px);
    height: 200px; /* Give container extra height/width for content alignment to show */
    gap: 10px;
    justify-content: space-around; /* Distributes columns with space around */
    align-content: space-between; /* Distributes rows with space between */
    border: 1px solid #ccc;
    padding: 10px;
}