CSS Grid

CSS Grid Columns

The CSS Grid Columns property is used to define the number and size of columns in a grid layout.

Columns are created using the grid-template-columns property.

With Grid Columns, you can:

Create multiple columns
Set fixed column widths
Create flexible columns
Mix fixed and flexible sizes
Build responsive layouts

This property is one of the most important parts of CSS Grid.

Syntax

CSS Grid Columns Syntax

css

.container {
    display: grid;
    grid-template-columns: value;
}

CSS Grid Columns Example

css

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

Creates three columns, each 200px wide.

Attributes

Value	Description	Example
px	Fixed column width	200px
%	Percentage width	50%
fr	Flexible fraction unit	1fr
auto	Automatic sizing	auto
repeat()	Repeats column definitions	repeat(3, 1fr)

Example

CSS Grid Columns Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Columns Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 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">Column 1</div>
        <div class="item">Column 2</div>
        <div class="item">Column 3</div>
    </div>
</body>
</html>

Output

Browser Output

css

The layout will display three columns:

+---------+------------------+---------+
| Column1 |     Column2      | Column3 |
+---------+------------------+---------+

The middle column will be twice as wide as the others
A gap will appear between columns
Items will automatically align into the defined column structure

Browser Support

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

Notes

fr stands for fractional unit.
1fr 1fr 1fr creates three equal-width columns.
1fr 2fr 1fr creates a wider middle column.
repeat() reduces repetitive code.

Equal Width Columns

css

grid-template-columns: 1fr 1fr 1fr;

Equal Width Columns with repeat()

css

grid-template-columns: repeat(3, 1fr);

Both produce:

text

Column1  Column2  Column3

Mixed Column Sizes

Mixed Column Sizes Example

css

grid-template-columns: 250px 1fr 150px;

First column = 250px
Second column = flexible
Third column = 150px

Conclusion

The grid-template-columns property defines the structure and width of columns in a CSS Grid layout. By combining fixed sizes, flexible units, and the repeat() function, you can create powerful and responsive layouts with minimal code.

PreviousCSS Grid Container NextCSS Grid Rows