CSS 网格项目在约束下扩展

Question

我有一个 CSS 网格布局，我在其中指定了每个 div 的开始/结束行和列，如下所示，您可以通过 CSS 看到

.grid-container {
width: 100%;
height: 100%;
display: grid;
grid-gap: 0;
}

.grid-item {
position: relative;
display: flex;
padding: 0;
border-radius: 10px;
margin: 10px;
background-color: #f6f6f6;
}

.g-1 {
margin-top: 20px;
margin-left: 20px;
background-color: white;
grid-column: 1/10;
grid-row: 1/2;
}

.g-2 {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
grid-column: 10/14;
grid-row: 1/40;
}

.g-3 {
margin-left: 20px;
background-color: #eaf0ff;
grid-column: 1/4;
grid-row: 2/12;
}

.g-4 {
background-color: #ebe3ff;
grid-column: 4/7;
grid-row: 2/12;
}

.g-5 {
background-color: #dff6db;
grid-column: 7/10;
grid-row: 2/12;
}

.g-6 {
margin-left: 20px;
margin-bottom: 20px;
grid-column: 1/5;
grid-row: 12/40;
}

.g-7 {
grid-column: 5/10;
grid-row: 12/28;
}

.g-8 {
margin-bottom: 20px;
grid-column: 5/10;
grid-row: 28/40;
}

导致这个

但是，当我在蓝色容器 .g-3 内添加一个简单的 h1 时，尽管被告知其列和行分别设置为 1/4 和 2/12，但它会垂直和水平扩展。

<div className="view">
      <div className="grid-container">
        <div className="grid-item g-1">
          <h1 className="header">Hello, Levi</h1>
        </div>
        <div className="grid-item g-2"></div>
        <div className="grid-item g-3">
          <h2>Testing Size</h2>
        </div>
        <div className="grid-item g-4"></div>
        <div className="grid-item g-5"></div>
        <div className="grid-item g-6"></div>
        <div className="grid-item g-7"></div>
        <div className="grid-item g-8"></div>
      </div>
    </div>

如何防止网格项目的内容从第一个屏幕截图中看到的原始布局扩展它们，尤其是考虑到文本仍有足够的空间时？

Answer 1

您没有为列定义任何大小，因此内容将定义这一点，并且每次更新内容时您都会有不同的布局。

您需要为列定义明确的大小：

.grid-container {
  height: 100vh;
  min-height:600px;
  display: grid;
  grid-gap: 0;
  grid-auto-columns:1fr; /* this should do the job and force all the columns to be equal */
  /* you can also try minmax(0,1fr) (related: https://stackoverflow.com/a/52861514/8620333) */
}

.grid-item {
  position: relative;
  display: flex;
  padding: 0;
  border-radius: 10px;
  margin: 10px;
  background-color: #f6f6f6;
}

.g-1 {
  margin-top: 20px;
  margin-left: 20px;
  background-color: white;
  grid-column: 1/10;
  grid-row: 1/2;
}

.g-2 {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  grid-column: 10/14;
  grid-row: 1/40;
}

.g-3 {
  margin-left: 20px;
  background-color: #eaf0ff;
  grid-column: 1/4;
  grid-row: 2/12;
}

.g-4 {
  background-color: #ebe3ff;
  grid-column: 4/7;
  grid-row: 2/12;
}

.g-5 {
  background-color: #dff6db;
  grid-column: 7/10;
  grid-row: 2/12;
}

.g-6 {
  margin-left: 20px;
  margin-bottom: 20px;
  grid-column: 1/5;
  grid-row: 12/40;
}

.g-7 {
  grid-column: 5/10;
  grid-row: 12/28;
}

.g-8 {
  margin-bottom: 20px;
  grid-column: 5/10;
  grid-row: 28/40;
}

<div class="grid-container">
  <div class="grid-item g-1">
    <h1 class="header">Hello, Levi</h1>
  </div>
  <div class="grid-item g-2"></div>
  <div class="grid-item g-3">
    <h2>Testing Size</h2>
  </div>
  <div class="grid-item g-4"></div>
  <div class="grid-item g-5"></div>
  <div class="grid-item g-6"></div>
  <div class="grid-item g-7"></div>
  <div class="grid-item g-8"></div>
</div>