CSS Grid

CSS Grid Container

A CSS Grid Container is an HTML element that uses the CSS Grid Layout system to arrange its child elements in rows and columns.

CSS Grid is a powerful two-dimensional layout system that allows you to control both:

Rows
Columns

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

Grid Layout is commonly used for:

Website layouts
Dashboards
Image galleries
Product grids
Responsive designs

Syntax

To create a grid container, use the display: grid; property.

CSS Grid Container Syntax

css

.container {
    display: grid;
}

CSS Grid Container Example

css

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

This creates a grid with three equal-width columns.

Attributes

Property	Description	Example
display	Creates a grid container	display: grid;
grid-template-columns	Defines column structure	grid-template-columns: 1fr 1fr;
grid-template-rows	Defines row structure	grid-template-rows: 100px 100px;
gap	Sets spacing between grid items	gap: 10px;
justify-items	Aligns items horizontally	justify-items: center;

Example

CSS Grid Container Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Container Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            border: 2px solid black;
            padding: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Output

Browser Output

css

The grid items will automatically arrange into three columns:

Item 1   Item 2   Item 3
Item 4   Item 5   Item 6

Each item will have equal width
A gap will appear between items
The layout will remain organized and responsive

Browser Support

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

Notes

Grid works on direct child elements only.
display: grid; creates a grid container.
Grid is ideal for two-dimensional layouts.
Modern websites frequently use CSS Grid for page structures.
Grid and Flexbox are often used together.

Flexbox vs Grid

Feature	Flexbox	Grid
Layout Type	One-dimensional	Two-dimensional
Controls Rows	Limited	Yes
Controls Columns	Limited	Yes
Best For	Navigation, toolbars	Full page layouts

Example of a 4-Column Grid

4-Column Grid Example

css

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

Creates four equal-width columns.

Conclusion

A CSS Grid Container is the foundation of the CSS Grid Layout system. By using display: grid, you can create structured row-and-column layouts that are flexible, responsive, and easier to manage than traditional layout techniques.

PreviousFlex Wrap NextCSS Grid Columns