How to auto size rows to fit the container in css?

Question

Please see the code below. How can I divide the inner box into six equal height rows? I know that something like this can be acheived with columns in display: grid using grid-template-columns:repeat(auto-fit,minmax(,)

* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outerbox {
  display: flex;
  align-items: center;
  height: 100vh;
}

.innerbox {
  width: 40vh;
  height: 40vh;
  background-color: #ced9d5;
  margin: 0 auto;
}

.item div {
  width: 40vh;
  height: 10px;
  border: 1px solid black;
}

<div class="outerbox">
  <div class="innerbox">
    <div class="item">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>
    </div>
  </div>
</div>

score 3 · Accepted Answer · edited Jul 20 '19 at 16:01

You can use display:flex and flex-direction:column on the container, and stretch the items to fill the available space using flex: 1 0 auto on the items.

* {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.outerbox {
    display: flex;
    align-items: center;
    height: 100vh;
}

.innerbox {
    width: 40vh;
    height: 40vh;
    background-color: #ced9d5;
    margin: 0 auto;
}

.item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.item div {
    width: 100%;
    flex: 1 0 auto;
    border: 1px solid black;
}

<div class="outerbox">

  <div class="innerbox">
    <div class="item">

      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>

    </div>
  </div>

</div>

Michael Benjamin · Answer 2 · 2019-07-20T12:30:53.053

You were on the right track with Grid.

Here are a few options:

grid-auto-rows: auto /* default setting; very simple: nothing to define */

.outerbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.innerbox {
  width: 40vh;
  height: 40vh;
  background-color: #ced9d5;
}

.item {
  display: grid;
  grid-row-gap: 5px;
  height: 100%;
}

.item div {
  border: 1px solid black;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="outerbox">
  <div class="innerbox">
    <div class="item">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>
    </div>
  </div>
</div>

grid-auto-rows: 1fr

.outerbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.innerbox {
  width: 40vh;
  height: 40vh;
  background-color: #ced9d5;
}

.item {
  display: grid;
  grid-row-gap: 5px;
  height: 100%;
  grid-auto-rows: 1fr;
}

.item div {
  border: 1px solid black;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="outerbox">
  <div class="innerbox">
    <div class="item">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>
    </div>
  </div>
</div>

The solution above is explained here: Equal height rows in CSS Grid Layout

Or you can set the row heights explicitly, like this:

grid-template-rows: repeat(6, 1fr)

.outerbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.innerbox {
  width: 40vh;
  height: 40vh;
  background-color: #ced9d5;
}

.item {
  display: grid;                         
  grid-row-gap: 5px;
  height: 100%;                          
  grid-template-rows: repeat(6, 1fr);  /* distribute the space in the container equally
                                          among six rows */
}

.item div {
  border: 1px solid black;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="outerbox">
  <div class="innerbox">
    <div class="item">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>
    </div>
  </div>
</div>

How to auto size rows to fit the container in css?

2 Answers2