CSS grid - grid-template-rows



The CSS property grid-template-rows defines both the row names and the functions for resizing the tracks in the rows of the grid.

You can define this property in the following ways:

  • either the value none expressed as a keyword.

  • or a <track-list> value.

  • or an <auto-track-list> value.

Possible values

  • none - It's a keyword that indicates the absence of an explicit grid structure. In this case, the rows are created implicitly and their size is determined by the grid-auto-rows property.

  • [line-name] - A <custom-ident> designates a name for the row positioned there. This identifier can be any valid string, with the exception of the reserved terms span and auto.

  • <length> - Is a non-negative length.

  • <percentage> - This value is a non-negative <percentage> relative to the block size of the grid container. If the size of the grid container depends on its tracks, the percentage behaves like auto to determine the actual size of the container.

  • <flex> - This value is a non-negative dimension with the unit fr, which indicates the flex factor of the track. Each track that has a certain size takes up a portion of the remaining space based on its flex factor.

  • max-content - It's a keyword that specifies the maximum content contribution of the grid elements that occupy the grid track.

  • min-content - It's a keyword that specifies the largest minimum content contribution of the grid elements within the grid track.

  • minmax(min, max) - This function defines a size range, from min to max values. If the maximum value is smaller than the minimum value, the maximum value isn't taken into account and the function only uses the minimum value.

  • auto - The maximum and minimum values in a track indicate the maximum and minimum content sizes (specified by min-width/min-height), respectively, and auto covers the range between them when used alone outside minmax() notation.

  • fit-content( [ <length> | <percentage> ] ) - Represents the expression min(max-content, max(auto, argument)), which is calculated similarly to auto (i.e. minmax(auto, max-content)), but the track size is limited to the argument if it exceeds the auto minimum.

  • repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) - Represents a repeating section of the track list and allows numerous rows with a recurring pattern to be written in a more compressed manner.

  • subgrid - If set as subgrid, the grid inherits the spanned section of its parent grid along an axis, relying on the parent grid's definition for rows/columns.

Syntax

grid-template-rows = none | <track-list> | <auto-track-list> | subgrid <line-name-list>?  

Applies to

Grid containers.

CSS grid-template-rows - Basic Example

The following example demonstrates specifying grid row sizes.

In the given example, the grid-template-rows property defines the layout of the grid container by specifying three rows of equal size with a fraction unit (1fr).

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
   }
   .grid {
      display: grid;
      height: 400px;
      grid-template-rows: 45px , 1fr;
      gap: 10px;
   }
   .grid-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: white;
      border-radius: 5px;
   }
   .demo-areaA {
      background-color: #3498db;
   }
   .demo-areaB {
      background-color: #e74c3c; 
   }
   .demo-areaC {
      background-color: #2ecc71;
   }
   .demo-areaD {
      background-color: #f39c12;
   }
   .demo-areaE {
      background-color: #9b59b6;
   }
   .demo-areaF {
      background-color: #34495e;
   }
   .demo-areaG {
      background-color: #c9d12e;
   }
</style>
</head>
<body>
   <div class="grid">
      <div class="grid-item demo-areaA">One</div>
      <div class="grid-item demo-areaB">Two</div>
      <div class="grid-item demo-areaC">Three</div>
      <div class="grid-item demo-areaD">Four</div>
      <div class="grid-item demo-areaE">Five</div>
      <div class="grid-item demo-areaF">Six</div>
      <div class="grid-item demo-areaG">Seven</div>
   </div>
</body>
</html>

CSS grid-template-rows - Using [line-name]

In the following example, the grid-template-rows property defines the layout of the grid container [row1] is used as a named line in the grid-template-rows property to create a specific row with the name row1 having a height of 120 pixels..

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f8ff;
      font-family: 'Arial', sans-serif;
   }
   #container {
      display: grid;
      grid-template-rows: [row1] 120px;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #ff9966;
      color: #fff;
      font-size: 1.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<div id="container">
   <div style="grid-row: row1;">Header Row</div>
   <div>Item One</div>
   <div>Item Two</div>
   <div>Item Three</div>
   <div>Item Four</div>
   <div>Item Five</div>
   <div>Item Six</div>
   <div>Item Seven</div>
   <div>Item Eight</div>
   <div>Item Nine</div>
   <div>Item Ten</div>
   <div>Item Eleven</div>
</div>
</body>
</html>

CSS grid-template-rows - Using <flex>

In the following example the CSS property grid-template-rows: 1fr 2fr 1fr 3fr; defines the grid container's row sizing, ensuring four rows with varying heights.

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f2f2f2;
   }
   #container {
      display: grid;
      grid-template-rows: 1fr 2fr 1fr 3fr;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #3498db;
      color: white;
      font-size: 2em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   }
</style>
</head>
<body>
<div id="container">
   <div>Element 1</div>
   <div>Element 2</div>
   <div>Element 3</div>
   <div>Element 4</div>
   <div>Element 5</div>
   <div>Element 6</div>
   <div>Element 7</div>
   <div>Element 8</div>
   <div>Element 9</div>
   <div>Element 10</div>
   <div>Element 11</div>
   <div>Element 12</div>
</div>
</body>
</html>     

CSS grid-template-rows - Using <length>

In the following example the CSS property grid-template-rows defines the grid container's row sizing using different length values, ensuring four rows with varying heights.

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #dcdcdc;
   }
   #container {
      display: grid;
      grid-template-rows: 30px 40px 60px 80px;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #ff8c00;
      color: #fff;
      font-size: 1.4em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   }
</style>
</head>
<body>
<div id="container">
   <div>Item Alpha</div>
   <div>Item Beta</div>
   <div>Item Gamma</div>
   <div>Item Delta</div>
   <div>Item Epsilon</div>
   <div>Item Zeta</div>
   <div>Item Eta</div>
   <div>Item Theta</div>
   <div>Item Iota</div>
   <div>Item Kappa</div>
   <div>Item Lambda</div>
   <div>Item Mu</div>
</div>
</body>
</html>

CSS grid-template-rows - Using <percentage>

In the following example the CSS property grid-template-rows defines the grid container's row sizing using different percentage values, ensuring four rows with varying heights.

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #e6e6e6;
   }
   #container {
      display: grid;
      grid-template-rows: 15% 20% 30% 40%;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #4CAF50;
      color: #fff;
      font-size: 1.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   }
</style>
</head>
<body>
<div id="container">
   <div>Item A</div>
   <div>Item B</div>
   <div>Item C</div>
   <div>Item D</div>
   <div>Item E</div>
   <div>Item F</div>
   <div>Item G</div>
   <div>Item H</div>
   <div>Item I</div>
   <div>Item J</div>
   <div>Item K</div>
   <div>Item L</div>
</div>
</body>
</html>

CSS grid-template-rows - Using max-content

In the following example the CSS property grid-template-rows: max-content defines the grid container's row sizing, each row will adjust its height based on the content within it.

This can be useful when you want the grid to adapt dynamically to the content's size in each row

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #dcdcdc;
   }
   #container {
      display: grid;
      grid-template-rows: max-content;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #ff8c00;
      color: #fff;
      font-size: 1.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border-radius: 6px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   }
</style>
</head>
<body>
<div id="container">
   <div>Item Alpha with lengthy content</div>
   <div>Item Beta</div>
   <div>Item Gamma</div>
   <div>Item Delta  with lengthy content</div>
   <div>Item Epsilon</div>
   <div>Item Zeta</div>
   <div>Item Eta</div>
   <div>Item Theta</div>
   <div>Item Iota</div>
   <div>Item Kappa  with lenghthy content</div>
   <div>Item Lambda</div>
   <div>Item Mu</div>
</div>
</body>
</html>

CSS grid-template-rows - Using min-content

In the following example the CSS property grid-template-rows: min-content defines the grid container's row sizing, each row will adjust its height based on the content within it.

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #e6f7ff;
      font-family: 'Arial', sans-serif;
   }
   #container {
      display: grid;
      grid-template-rows: min-content;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #ffcc66;
      color: #333;
      font-size: 1.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<div id="container">
   <div>Item One</div>
   <div>Item Two</div>
   <div>Item Three</div>
   <div>Item Four</div>
   <div>Item Five</div>
   <div>Item Six</div>
   <div>Item Seven</div>
   <div>Item Eight</div>
   <div>Item Nine</div>
   <div>Item Ten</div>
   <div>Item Eleven</div>
   <div>Item Twelve</div>
</div>
</body>
</html>

CSS grid-template-rows - Using repeat function

In the following example the CSS property grid-template-rows: repeat() defines the grid container's row sizing using different percentage values, ensuring rows with varying heights.

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #e6f7ff;
      font-family: 'Arial', sans-serif;
   }
   #container {
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 15%));
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #ffcc66;
      color: #333;
      font-size: 1.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<div id="container">
   <div>Item One</div>
   <div>Item Two</div>
   <div>Item Three</div>
   <div>Item Four</div>
   <div>Item Five</div>
   <div>Item Six</div>
   <div>Item Seven</div>
   <div>Item Eight</div>
   <div>Item Nine</div>
   <div>Item Ten</div>
   <div>Item Eleven</div>
   <div>Item Twelve</div>
</div>
</body>
</html>

CSS grid-template-rows - Using auto

In the following example the row size of the grid container is defined by the CSS rule grid-template-rows: auto auto;, which indicates that it has two rows with an automatic height that changes according to the content in each row.

This produces a grid layout in which the height of each row dynamically changes to fit the content.

<html>
<head>
<style>
   body {
      background-color: #F2F2F2;
   }
   #customGrid {
      height: 300px;
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 15px;
      background-color: #4CAF50;
      padding: 15px;
      grid-template-rows: auto auto;
   }
   #customGrid div {
      background-color: rgba(255, 255, 255, 0.9);
      text-align: center;
      padding: 20px;
      font-size: 24px;
      color: #333;
   }
</style>
</head>
<body>
<h1>Grid with grid-template-rows</h1>
<div id="customGrid">
   <div class="box1"> Box A</div>
   <div class="box2">Box B</div>
   <div class="box3">Box C</div>
   <div class="box4">Box D</div>
   <div class="box5">Box E</div>
   <div class="box6">Box F</div>
</div>
</body>
</html>
Advertisements