/    Sign up×
Reference /Pin to ProfileBookmark

grid-template-rows

The grid-template-rows property designates the number and heights of the rows in a grid layout.

Syntax

The height of each row is specified in a space separated list of values. First value is for the first row, second value for the second row, and so on.

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

Values

none
Default value. No height is set and rows are created as necessary.

auto
The size of the container and the size of the content of the items in the row determines the size of the rows.

max-content
The largest item in the row sets the size of the row.

min-content
The smallest item in the row sets the size of the row.

length
Designates the row’s size in px, cm, em, rem, etc.

Browser Compatibilty

Demos

Have a code example of grid-template-rows? Submit a codepen.io demo and we'll showcase it here

to submit a demo.
CSS
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...