GRID CSS — 我怎么能不定义网格行端？答案

【问题标题】：GRID CSS — How can I not define the grid-row-end?GRID CSS — 我怎么能不定义网格行端？
【发布时间】：2020-02-11 11:11:23
【问题描述】：

我正在制作一个作品集，这是第一次使用 Grid CSS。我对此很陌生，并且对网格行有疑问。我从来没有在互联网上看到过解决方案，所以这就是我在这里问的原因。

我有一个容器，里面有大小相同的不同盒子。我想用 JavaScript（动态）扩展盒子的数量。我的问题是：我是否需要写一个grid-row-end，即使我不知道容器的高度，因为我实际上不知道我会有多少个盒子？

我预览了我的问题，这是预览。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, roboto, sans-serif;
  background: #222f3e;
  color: #c8d6e5;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 5rem;
  grid-gap: 3rem 2rem;
}

.container header,
.container footer {
  background: #576574;
  grid-column: 1 / span 10;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container header {
  grid-row: 2 / span 1;
}

.container .content {
  grid-column: auto / span 10;
  background: #8395a7;
  grid-row: auto / span 10;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 2.5rem;
  grid-gap: 2.5rem 2.5rem;
  grid-auto-flow: row;
}

.container .content .box {
  grid-column: auto / span 3;
  grid-row: auto / span 5;
  background: #ff6b6b;
}

.container footer {
  grid-row: auto / span 2;
}

<div class="container">
  <header>
    <h1> Grid CSS </h1>
  </header>
  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <footer>
    <h2> Mon Footer </h2>
  </footer>
</div>

非常感谢！

路易

【问题讨论】：

标签： css sass flexbox css-grid

【解决方案1】：

您不需要定义所有这些模板。让它变得简单并依赖高度，因为您确切地知道每个项目应该有多高并保持内容自动：

body {
  background: #222f3e;
  color: #c8d6e5;
  margin:0;
}
.container {
  display: grid;
  padding-top:8rem;
  grid-row-gap: 3rem;
}
.container header, .container footer {
  background: #576574;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container header {
  height:5rem;
}
.container .content {
  background: #8395a7;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2.5rem;
}
.container .content .box {
  height:22.5rem;
  background: #ff6b6b;
}
.container footer {
  height:13rem;
}

<div class="container">  
  <header>
    <h1> Grid CSS </h1>
  </header>
  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <footer>
    <h2> Mon Footer </h2>
  </footer>
</div>

【讨论】：

【解决方案2】：

将.container的grid-auto-rows设置为minmax(5rem, max-content);：

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, roboto, sans-serif;
  background: #222f3e;
  color: #c8d6e5;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: minmax(5rem, max-content);
  grid-gap: 3rem 2rem;
}

.container header,
.container footer {
  background: #576574;
  grid-column: 1 / span 10;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container header {
  grid-row: 2 / span 1;
}

.container .content {
  grid-column: auto / span 10;
  background: #8395a7;
  grid-row: auto / span 10;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 2.5rem;
  grid-gap: 2.5rem 2.5rem;
  grid-auto-flow: row;
}

.container .content .box {
  grid-column: auto / span 3;
  grid-row: auto / span 5;
  background: #ff6b6b;
}

.container footer {
  grid-row: auto / span 2;
}

<div class="container">
  <header>
    <h1> Grid CSS </h1>
  </header>
  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <footer>
    <h2> Mon Footer </h2>
  </footer>
</div>

【讨论】：