添加内容时防止网格项扩展

Question

我正在尝试创建一个布局，其中屏幕被分成一些大小相同的单元格。当我用内容填充其中一个单元格时，它会拉伸得比其他单元格大，即使内容比单元格本身小得多。

尽管单元格足够大以容纳其内容，但为什么单元格会拉伸？我怎样才能防止它调整大小？

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #880022;
}

#content {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
}

#content2 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  height: 100%;
  background-color: #ff00ff;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  grid-gap: 2px 2px;
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

<div id="content">
  <div id="grid">
    <div class="tile"><span>test</span></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

Answer 1

您将列和行的大小设置为auto。这意味着它们的大小将根据其内容而定。相反，请使用frunits，它使用容器中的可用空间。

#content {
  display: grid;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
  height: 100vh;
  background-color: #880022;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;     /* adjustment */
  grid-template-columns: 1fr 1fr;  /* adjustment */
  grid-gap: 2px;
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.tile span {
  font-size: 2em;
}

body {
  margin: 0;
}

<div id="content">
  <div id="grid">
    <div class="tile"><span>test</span></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

jsFiddle 演示