Question

请参见下面的代码。如何将内盒分为六个等高行？我知道可以使用i+=1

在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;
}

Answer 1

您可以在容器上使用CommandParameter和ListView，并在项目上使用display:flex拉伸项目以填充可用空间。

flex-direction:column

flex: 1 0 auto

Answer 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>

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

2 个答案: