CSS Grid Template Columns
The grid-template-columns property defines the number and size of columns inside a CSS Grid Container.
It controls how the available horizontal space is divided between Grid columns.
What is grid-template-columns?
The grid-template-columns property is used to define the column structure of a CSS Grid.
You can define columns using values such as px, %, fr, auto, and repeat().
Basic Syntax
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}The Grid Container contains three columns.
The first column receives 1 fraction, the second column receives 2 fractions, and the third column receives 1 fraction.
Therefore, the column proportion is 1 : 2 : 1.
Understanding the fr Unit
The fr unit means fraction of the available space.
It is commonly used to create flexible Grid columns.
For example, 1fr 2fr 1fr divides the available space into four fractions.
Column Structure Diagram
Column 1
Column 2
Column 3
Column 1
Column 2
Column 3
Three columns are created with a 1 : 2 : 1 proportion.
Creating Equal Columns
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}The three columns receive equal amounts of available horizontal space.
The proportion is: 1 : 1 : 1.
Different Column Sizes
Grid columns do not have to be equal. Different values can be used to create different column sizes.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}The available space is divided into 4 fractions.
The first column receives 1 fraction, the second receives 2 fractions, and the third receives 1 fraction.
The resulting proportion is: 1 : 2 : 1.
Using Pixel Values
.container {
display: grid;
grid-template-columns: 200px 300px 200px;
}The first column has a width of 200px.
The second column has a width of 300px.
The third column has a width of 200px.
Using Percentage Values
.container {
display: grid;
grid-template-columns: 25% 50% 25%;
}Percentage values define column sizes relative to the available width of the Grid Container.
The three columns use 25%, 50%, and 25%.
Using auto
.container {
display: grid;
grid-template-columns: 200px auto 200px;
}The first and third columns are fixed at 200px.
The middle column uses the remaining available horizontal space.
Using repeat()
The repeat() function is useful when multiple columns have the same size.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}This creates three equal flexible columns.
It is equivalent to:
grid-template-columns: 1fr 1fr 1fr;repeat() with Fixed Width
.container {
display: grid;
grid-template-columns: repeat(2, 200px);
}This creates two columns.
Each column has a width of 200px.
Combining Different Units
.container {
display: grid;
grid-template-columns: 200px 1fr 2fr;
}CSS Grid allows different units to be combined in the same declaration.
The first column is fixed at 200px.
The remaining available space is divided between the 1fr and 2fr columns.
Example 🤓🌍
A training dashboard can use three columns for course navigation, main content, and quick links.
.dashboard {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 15px;
}The main content receives twice as much horizontal space as the two side sections.
The resulting proportion is 1 : 2 : 1.
Output
Important Properties
grid-template-columns
Defines the number and size of Grid columns.
fr
Represents a fraction of the available Grid space.
repeat()
Repeats a column size multiple times.
auto
Allows a column to use available remaining space.
Common Values
| Value | Purpose |
|---|---|
| 1fr 1fr | Creates two equal flexible columns. |
| 1fr 2fr | Creates two columns with a 1 : 2 proportion. |
| 200px 300px | Creates fixed-width columns. |
| 25% 75% | Creates columns using percentages. |
| 200px auto | Creates one fixed column and one flexible column. |
| repeat(3, 1fr) | Creates three equal flexible columns. |
Real-World Uses
- Website navigation layouts
- Course dashboards
- Admin panels
- Product layouts
- Portfolio layouts
- Sidebar and content layouts
Summary
The grid-template-columns property controls the number and size of columns in a CSS Grid layout. Values such as px, fr, %, auto, and repeat() can be used to create flexible and structured Grid layouts.