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. The supporting concepts are explained in CSS Grid Rows and CSS Grid Gap.

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
grid-template-columns	57	16	52	10.1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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