GeezerVison

grid-template-columns - Defines the number and width of the columns in the grid
grid-template-rows - Defines the number and height of the rows in the grid
grid-template-areas - Defines how to display columns and rows, using named grid items

The CSS grid-template-columns Property

The grid-template-columns property defines the number and width of the columns in the grid.

The value is a space-separated-list, where each value defines the width of the respective column.

Common values are:

Fixed lengths (100px 300px 200px)
Percentages (20% 60% 20%)
fr unit (1fr 2fr 1fr)
auto (auto auto auto)
repeat() (repeat(3, 1fr))
minmax() (minmax(80px, 1fr) 150px 150px)

CSS grid-template-columns: auto

To create a grid layout with 3 columns of equal width, use the "auto" keyword.

Example

Create a grid with 3 columns of equal width:

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

Result:

Try it Yourself »

Grid Columns with Mixed Width

To create a grid layout with 3 columns: 2 columns with a fixed width, and 1 column with size "auto".

Example

Create a grid with a fixed size for column 1 and 2, and column 3 as auto size:

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

Result:

Try it Yourself »

Note: If you have more than 3 grid items in a 3 columns grid, the grid will automatically add new rows to put the items in.

Grid Columns with the fr Unit

The fr unit stands for "fraction". This unit automatically divides the available space into fractions.

1fr will take 1 fraction of the available space, while 2fr will take 2 fractions of the available space.

Example

Here, each column will take up 33.3% of the container width, splitting it equally:

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

Result:

Try it Yourself »

Example

Here, the second column will be twice as big as the others:

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

Result:

Try it Yourself »

Grid Columns with the repeat() Function

The CSS repeat() function is used to repeat a set of columns or rows in a grid.

Example

Use repeat() to create three equal-width columns in a grid:

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

Result:

Try it Yourself »

Grid Columns with the minmax() Function

The CSS minmax() function is used to define a size-range greater than or equal to a min value and less than or equal to a max value.

Example

Use minmax() to define that first column is at least 80px wide and can grow to 1fr:

.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}

Result:

Try it Yourself »

The CSS grid-template-rows Property

The grid-template-rows property defines the number and height of the rows in the grid.

The value is a space-separated-list, where each value defines the height of the respective row.

Common values are:

Fixed lengths
Percentages
fr unit
auto
min-content
max-content
repeat()
minmax()
fit-content()

Example

Set the first row in the grid to 80px high, and the second row to 200px high:

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

Result:

Try it Yourself »

Notice that the first row in the grid above is 80px high and the second row is 200px high. The next rows will use auto as default.

❮ Previous Next ❯

★ +1

W3Schools Full Access - your next career move

REMOVE ADS

Learn more about Adventure Mode›

Free account

Track your progress

XP earned 0 Day streak 0 Spaces 0 League —

New

Learn in Adventure Mode W3Schools Adventure App

Coding fundamentals as bite-sized lessons and challenges.

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

   

FORUM ABOUT CAMPUS

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

CSS Tutorial

CSS Advanced

CSS Flexbox

CSS Grid

CSS Responsive

CSS Cert

CSS SASS

CSS Examples

CSS References

CSS Grid Tracks

CSS Grid Tracks (Rows and Colums)

The CSS grid-template-columns Property

CSS grid-template-columns: auto

Example

Grid Columns with Mixed Width

Example

Grid Columns with the fr Unit

Example

Example

Grid Columns with the repeat() Function

Example

Grid Columns with the minmax() Function

Example

The CSS grid-template-rows Property

Example

Track your progress

Learn in Adventure Mode W3Schools Adventure App

Contact Sales

Report Error

Top Tutorials

Top References

Top Examples

Get Certified