CSS Grid

CSS Grid is a powerful layout system used to create two-dimensional web layouts using rows and columns.

Unlike Flexbox, which is primarily designed around one dimension at a time, CSS Grid allows developers to control both rows and columns together.

What Is CSS Grid?

Basic Grid Syntax

.container {
    display: grid;
}

Setting display: grid; turns an element into a Grid Container.

CSS Grid Structure

Rows and Columns

A Grid layout is built using horizontal rows and vertical columns.

Example 1: Three Equal Columns

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

The 1fr 1fr 1fr value creates three equal columns.

Output

Understanding the fr Unit

The fr unit represents a fraction of the available space inside the Grid Container.

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

Grid Gap

The gap property creates space between Grid Items.

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

Using repeat()

The repeat() function makes repeated Grid column or row definitions easier to write.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

This is equivalent to:

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

Important CSS Grid Properties

Grid Container and Grid Items

CSS Grid vs Flexbox

Example 🤓🌍

CSS Grid is commonly used for dashboards, course cards, product galleries, image galleries, and complete webpage layouts.

.course-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.course-card {
    padding: 20px;
    border: 1px solid #2563eb;
}

Advantages of CSS Grid