01E. Define CSS Grid Rows with grid-template-rows 관련

Mastering CSS Grid | Colt Steele

---

Learn web development with Colt Steele

• Example

---

Define CSS Grid Rows with grid-template-rows | Colt Steele

The `grid-template-rows` property is used to define rows within a CSS Grid container.

The grid-template-rows property is used to set up the rows in a grid container.

This property is set on the parent container, not on the individual elements in the grid.

---

Example

To start, let's work with three boxes and set up the grid-template-rows:

#container {
  margin: 0 auto;
  width: 1000px;
  height: 1000px;
  border: 4px solid black;

  /* GRID STUFF BELOW THIS LINE */
  display: grid;
  grid-template-rows: 200px 200px 200px;
}

Here, we have set up three rows with a height of 200 pixels each:

screenhot

Because the container is 1000 pixels tall, there will be some unused space.

We can adjust the middle row to be 500 pixels tall:

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

value grid template

If we add another row with 100 pixels, we will have to add another box in the HTML to fill the added row:

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

grid template rows

Let's try specifying two rows with a height of 400 pixels, even though we have multiple elements inside the container:

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

In this case the first two elements will fill the 400-pixel tall rows, and the remaining elements will try to fit into the remaining space. If there's not room, the items might overflow:

behavior screen

---