Question

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

为什么细胞伸展尽管它的内容很大？如何防止它调整大小？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您要将列和行大小设置为auto。这意味着它们将根据其内容进行调整。相反，use fr units，它使用容器中的空闲空间。

#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 demo

Answer 2

你有很多额外的标记，这是一个简化版本，诀窍是使用fr单位而不是auto，你可以使用repeat()

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #802;
}

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(80px, 1fr));
  grid-gap: 2px;
  padding: 20px;
  box-sizing: border-box;
  height: 100vh
}

.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="grid">
  <div class="tile"><span>test</span></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

Answer 3

尝试

max-width：某事px; max-height：px;

在#grid里面。

Answer 4

一种解决方案是为您的.tile元素提供 line-height: 0 。这将确保文本不会占用任何空间，但会限制您每平方只有一行文字：

＆＃13;

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;
  line-height: 0;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <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>
</body>

</html>

＆＃13;

但是，在我看来，更好的解决方案是在#grid上设置 grid-auto-rows: 1fr ，它指示每个行采取高出最高排的高度：

＆＃13;

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;
  grid-auto-rows: 1fr;
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <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>
</body>

</html>

＆＃13;

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

4 个答案:

jsFiddle demo