html - CSS 网格项目在约束下扩展

Question

我有一个 CSS Grid 布局，在其中我为每个 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;
}

这导致了这个

但是，当我在蓝色容器中添加一个简单的 h1 时，.g-3尽管被告知其列和行分别设置为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>

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

标签： htmlcsscss-grid

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>