Grid Layout: Build Powerful Two-Dimensional Layouts with Ease

What is CSS Grid?

• CSS Grid is a two-dimensional layout system that allows developers to design web pages using rows and columns.

• It makes creating responsive and organized layouts simpler, cleaner, and more efficient.

• CSS Grid is a layout module that helps developers arrange elements in rows and columns.

• Unlike Flexbox, which works primarily in one direction (row or column), Grid works in both directions simultaneously.

Creating a Grid Container

To use Grid, set the display property to grid.

.container {
    display: grid;
}

Defining Columns

Use grid-template-columns to create columns.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

This creates three columns, each 200px wide.

You can also use fractions (fr):

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

Each column gets equal space.

Defining Rows

Use grid-template-rows to define row sizes.

.container {
    display: grid;
    grid-template-rows: 100px 100px;
}

This creates two rows with a height of 100px each.

Gap Property

The gap property adds spacing between rows and columns.

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