CSS Grid-template-rows Property - W3docs

Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools

• Password Generator
• HTML Editor
• HTML Encoder
• Base 64
• Code Diff
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• JTW Decoder

CSS Maker

• CSS Maker
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face

Color Tools

• Color Picker
• Colors CMYK
• Colors HWB
• Colors HSL
• Color Hex
• Color mixer
• Color Converter
• Colors RGB
• Color Contrast Analyzer
• Color Gradient

String Tools

• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

Change theme

• Dark
• Light
• System

• CSS Basic CSS IntroductionCSS UsageCSS SyntaxCSS id and classCSS TextCSS FontCSS LinksCSS TablesCSS BorderCSS PaddingCSS MarginCSS Color NamesCSS Gradients
• CSS Guides Flexbox GuideCSS3 Properties
• CSS Selectors CSS Selectors*:active::after::before:checked:default:dir():disabled:empty:enabled:first-child::first-letter::first-line:first-of-type:focus:fullscreen:hover:in-range:indeterminate:invalid:lang():last-child:last-of-type:link:not():nth-child():nth-last-child:nth-last-of-type():nth-of-type:only-child:only-of-type:optional:out-of-range::placeholder:read-only:read-write:required:root:scope::selection:target:valid:visited
• CSS Properties align-contentalign-itemsallanimationalign-selfanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionappearancebackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizebleedblock-overflowborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-style
• border-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumnscolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfillfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-displayfont-familyfont-feature-settings@font-feature-valuesfont-kerning
• font-sizefont-size-adjustfont-language-overridefont-stretchfont-stylefont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-rendering@importinitial-letterisolationjustify-contentjustify-items@keyframesleftletter-spacingline-breakline-clampline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-height
• max-linesmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-breakpage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originplace-itemspointer-eventspositionquotesresizerightscroll-behaviorscrollbarshape-outsidespeakstrokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-widthtab-sizetable-layout
• text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-fill-colortext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-stroketext-stroke-colortext-stroke-widthtext-transformtext-underline-positiontoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiunicode-rangeuser-selectvertical-alignvisibilitywhite-spacewidowswidthwill-changeword-breakword-spacingword-wrapwriting-modez-indexzoom

CSS grid-template-rows Property ❮ Prev Next ❯

The grid-template-rows property defines the number and size of the rows in a grid layout. The values of the grid-template-row property are separated by space. Each of the values specifies the row height.

Besides the main values, there are two other values which are experimental technology: "fit-content" and "repeat".

Initial Value	none
Applies to	Grid containers.
Inherited	No.
Animatable	Yes. The size of the rows is animatable.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridTemplateRows = "20px 100px";

Syntax

grid-template-rows: none | auto | max-content | min-content | flex | fit-content| repeat | length | initial | inherit;

Example of the grid-template-row property:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .auto-container { display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto auto; grid-gap: 10px; background-color: #ccc; padding: 10px; margin-top: 30px; } .auto-container > div { background-color: #eee; text-align: center; padding: 30px 0; font-size: 30px; } </style> </head> <body> <h2>Grid-template-rows property example</h2> <div class="auto-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> </html> Try it Yourself »

Result

Example of the grid-template-row property with the specified size of rows:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: 100px 300px; grid-gap: 10px; background-color: #ccc; padding: 10px; } .grid-container > div { background-color: #eee; text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h2>Grid-template-rows property example</h2> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> </html> Try it Yourself »

Values

Value	Description	Play it
none	This is the default value of the property.	Play it »
auto	The size of the rows takes up the size of the container.	Play it »
max-content	The size of each rows depends on the largest item in the rows.
min-content	The size of each rows depends on the smallest item in the rows.
minmax(min.max)	The size range is greater than or equal to "min" and less than or equal to "max".
<length>	The size of the rows is specified by length value.	Play it »
<percentage>	The size of the rows is specified by percentages.
<flex>	A non-negative dimension with the unit "fr" that specifies the track’s flex factor. Each <flex>-sized track shares remaining space in proportion to its flex factor.
fit-content	Represents the min(max-content, max(auto, argument)), which is similar to auto (i.e. minmax(auto, max-content)), but the size is greater than the auto minimum. This value is considered to be experimental.
repeat	Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.This value is considered to be experimental.
subgrid	Indicates the grid will adopt the spanned portion of its parent grid in the specified axis. The sizes of the grid rows/columns are taken from the parent grid’s definition.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Browser support

57.0+	16.0+	52.0+	10.1+	44.0+

Practice Your Knowledge

What does the grid-template-rows property in CSS do? It defines the number of rows in a grid layout. It specifies the size(s) of the rows in a grid layout. It creates the grid layout in CSS. It controls the amount of space between each row in a grid layout. It defines the order of layers in a grid layout. Correct! Incorrect! Submit

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

• CSS Basics

❮ Prev Next ❯

Related Resources

• CSS grid Property
• CSS grid-template Property
• CSS grid-template-columns Property
• CSS grid-template-areas Property

Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes

• PHP basics
• HTML Basics
• Javascript Basics
• CSS Basics
• ES6 Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Git Basics
• Vue.js Basics
• SQL Basics
• Python Basics
• Java Basics
• NodeJS Basics