Skip to main content

grid-template-columns Property in CSS Grid Layouts

grid-template-columns specifies the number and widths of columns browsers should display in the selected grid container.

Example 1: Create a Two-Columns Grid Container

section {
display: grid;
grid-template-columns: 95px 1fr;
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display two columns of different widths in the selected <section> grid container.

note

We used the fr (fraction) unit to scale the second column relative to the fraction of available space in the grid container.

Example 2: Create a Three-Columns Grid Container

section {
display: grid;
grid-template-columns: 15% 60% 25%;
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display three columns of different widths in the selected <section> grid container.

note

You can use the grid-auto-columns property to specify default column widths for all the grid container's columns. For instance, grid-auto-columns: 150px will set default widths of 150px for all columns. But a grid-template-columns declaration will override it.

tip

Use the CSS repeat() function to specify grid-template-columns values with repeated patterns.

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

This article discussed what a CSS grid-template-columns property is. We also used examples to see how it works.

Everything you need to sell courses, webinars, downloads, and community.