CSS Grid

Introduction

A grid is a set of intersectiong horizontal and vertical lines defining columns and row, and elements can be placed onto this grid within the column and row lines. Together with flxbox, grid is a powerful way to create an intricate CSS layout.

Features:

Fixed and flexible track sizes
- Fixed, e.g.: px
- Flexible, e.g.: % and fr
Item placement
- by exact location using line numbers, names, or by targeting an area of the grid.
- by algorithm
Creation of additional tracks to hold content
- Grid layout specification is flexible enough to add additional rows and columns when needed. There's even features to add as many as will fit.
Alignment control
Control of overlaping content
- More than 1 item can be placed in 1 grid cell/area, as well as they can be partially overlap. Layering is controled by z-index property.

Grid Container

display: grid

display: inline-grid

An element is made into a grid container by display: grid or inline-grid declaration. All of its direct children become the grid items.

The default grid is to arrange the grid items vertically (1 column, multiple rows) just like in an unstyled list.

<!-- HTML -->
<div class="gridDefault">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</div>

/* CSS */
.gridDefault {
    display: grid;
    border: 4px solid plum;
}

.gridDefault div {
    border: 4px solid peachpuff;
}

Result

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

CSS Grid

Introduction

Grid Container

Grid Tracks

Resources

Tools