如何自动调整行大小以适应 CSS 中的容器？答案

【问题标题】：How to auto size rows to fit the container in css?如何自动调整行大小以适应 CSS 中的容器？
【发布时间】：2019-11-29 01:25:54
【问题描述】：

请看下面的代码。如何将内盒分成六等高的行？我知道这样的事情可以通过display: grid 中的列使用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>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

您可以在容器上使用display:flex 和flex-direction:column，并在项目上使用flex: 1 0 auto 拉伸项目以填充可用空间。

* {
    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>

【讨论】：

【解决方案2】：

您在使用 Grid 时走在正确的轨道上。

这里有几个选项：

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>

上面的解决方案在这里解释：Equal height rows in CSS Grid Layout

或者您可以明确设置行高，如下所示：

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>

【讨论】：