CSS Grid

CSS Grid Layout Example

A CSS Grid Layout combines rows, columns, and spacing to create structured and responsive web page layouts.

In real-world projects, CSS Grid is commonly used for:

Website layouts
Dashboards
Admin panels
Product galleries
Portfolio websites

This lesson demonstrates how to build a complete grid layout using the concepts learned in previous lessons:

Grid Container
Grid Columns
Grid Rows
Grid Gap

Syntax

A typical grid layout uses:

CSS Grid Layout Syntax

css

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

This creates a responsive three-column grid with spacing between items.

Attributes

Property	Description	Example
display	Creates grid container	display: grid;
grid-template-columns	Defines columns	repeat(3, 1fr);
grid-template-rows	Defines rows	auto;
gap	Sets spacing between items	gap: 20px;
repeat()	Repeats rows or columns	repeat(4, 1fr);

Example

CSS Grid Layout Example Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Layout Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 20px;
        }
        .card {
            background-color: lightblue;
            border: 1px solid #333;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
        <div class="card">Card 5</div>
        <div class="card">Card 6</div>
    </div>
</body>
</html>

Output

Browser Output

css

The cards will automatically arrange into a three-column grid:

+---------+---------+---------+
| Card 1  | Card 2  | Card 3  |
+---------+---------+---------+

+---------+---------+---------+
| Card 4  | Card 5  | Card 6  |
+---------+---------+---------+

Three columns will appear
Equal spacing will exist between cards
The layout will be clean and organized

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

Notes

CSS Grid is ideal for two-dimensional layouts.
The repeat() function reduces repetitive code.
Grid layouts automatically adapt to content placement.
Gap spacing keeps layouts organized.
CSS Grid works well with responsive design techniques.

Responsive Grid Example

css

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

Automatically adjusts the number of columns based on available screen width.

Common Grid Layouts

Layout Type	Columns
Two Column Layout	repeat(2, 1fr)
Three Column Layout	repeat(3, 1fr)
Four Column Layout	repeat(4, 1fr)
Responsive Layout	auto-fit + minmax

Conclusion

CSS Grid Layout provides a powerful and flexible way to create modern web page structures. By combining grid containers, rows, columns, and gaps, developers can build clean, responsive, and maintainable layouts with minimal code.

PreviousCSS Grid Gap NextCSS Shadows