CSS: grid-template-rows

Define rows layout

grid-template-rows

Define the height of each row.

just like grid-template-columns but for rows.

Example. Basic

code

<div class="xgrid-basic-HStCQ">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>

.xgrid-basic-HStCQ {
 display: grid;
 grid-template-rows: 1fr 3fr 1fr;
 gap: 2px;
 > div {
  border: solid 1px grey;
 }
}

Example. 5 rows

code

<div class="xgrid-5rows">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
</div>

.xgrid-5rows {
 display: grid;
 grid-template-rows: 1fr 3fr 1fr 2fr 1fr;
 gap: 2px;
 > div {
  border: solid 1px grey;
 }
}

Example. Both row and column.

usually, you define both row and column.

together, they define the grid shape, for child items to sit on.

code

<div class="xgrid-both-q3r8g">
 <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>9</div>
</div>

.xgrid-both-q3r8g {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: 1fr 2fr 1fr;
 gap: 2px;
 > div {
  border: solid 1px grey;
 }
}

Example. xgrid-vcfr7

code

<div class="xgrid-vCFr7">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>

.xgrid-vCFr7 {
 display: grid;
 grid-template-columns: 1fr 4fr 1fr;
 grid-template-rows: 1fr 4fr;
 gap: 2px;
 > div {
  border: solid 1px grey;
 }
}