保持 CSS 网格中列之间的比率。网格列是如何计算的？

Question

我想让我的网格保持一定的比例，但是一个长句子增加了它所属网格的宽度。

body {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}

aside {
  grid-column: 8 / 13;
  border: 2px solid black;
}

<main>
  <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus
    ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</main>
<aside>
  <p>Aside</p>
</aside>

我尝试使用 "word-wrap: break-word"、"word-break: break-all"、"white-space: normal"、"overflow-wrap: break-word"、"overflow: hidden"，但其中 none 有效。

如何让文本在网格内换行或隐藏溢出？

Answer 1

我加了grid-template-columns:repeat(13,1fr);

body {
    display: grid;
  grid-template-columns:repeat(13,1fr);
}

main {
    grid-column: 1 / 8;
    border: 2px solid black;
}

aside {
    grid-column: 8 / 13;
    border: 2px solid black;
}

<main> 
    <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</main>
<aside>
    <p>Aside</p>
</aside>

Answer 2

这是合乎逻辑的行为，您只需要了解不同大小的计算方式，并考虑到您的配置，不会有任何比率。

让我们从一个简单的例子开始：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}

<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
</div>

我们已经定义了一个 grid-column:1/8，因此我们将隐式地有 7 列，每列的大小将根据内容计算。在这种情况下，这是微不足道的，因为每列的大小都相同。基本上我们没有指定我们的网格需要有 7 列或者它们都需要具有相同的大小。这是隐式定义的。

此隐式网格稍后将用于放置其他元素：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}
.container > div {
  background:red;
  height:50px;
}

<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <div></div>
</div>

如您所见，红色 div 将放在先前定义的第一列上。

现在让我们添加另一个元素：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}

aside {
  grid-column: 8 / 13;
  border: 2px solid black;
}

<div class="container">
  <main>
    <p>Mauris neque quam,</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>

这是一个更复杂的情况，其中总列数等于 12，但并非所有列的大小都相等：

此处进行的计算有些复杂 ¹ 并取决于内容。如果我们参考 the specification:

Once the grid items have been placed, the sizes of the grid tracks (rows and columns) are calculated, accounting for the sizes of their contents and/or available space as specified in the grid definition.

我们在网格定义中没有指定任何内容，因此这里只决定内容大小。如果您只是简单地更改内容而不需要使用长句，您可以清楚地注意到这一点：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}

aside {
  grid-column: 8 / 13;
  border: 2px solid black;
}

<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>ABC</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam  .</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>A Mauris Mauris</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>

每次我们使用不同的内容，每次我们获得不同的大小。

为避免这种情况，您需要明确定义网格的大小。在您的情况下，您希望有 12 列，第一项为 7，第二项为 5。您可以简单地这样做：

.container {
  display: grid;
  grid-template-columns:7fr 5fr;
}

main {
  border: 2px solid black;
}

aside {
  border: 2px solid black;
}

<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>ABC</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam  .</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>A Mauris Mauris</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div><div class="container">
  <main>
    <p>A Mauris Mauris A Mauris Mauris A Mauris Mauris A Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris Mauris</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>

¹让我们举个简单的例子来了解如何计算：

.container {
  display: grid;
  width:600px;
}

main {
  grid-column: 1 / 3;
}
main > div {
  width:50px;
  height:50px;
  background:red;
}

aside {
  grid-column: 3/ 4;
}
aside > div {
  width:100px;
  height:50px;
  background:green;
}

<div class="container">
  <main>
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>

在这个例子中，我们有一个网格宽度等于 600px，第一个元素 50px 和第二个 100px 我们将有一个免费的 space 450px。隐式网格包含 3 列，因此我们将此 space 拆分为 3。一部分将到达 aside（100px + 150px = 250px），因此我们将有一列等于 250px包含等于 100px 的元素。另外两个部分将转到 main (50px + 2*150px = 350px)，因此每一列都等于 175px。

我们反其道而行之。我们的 div 的大小应该是多少才能获得相同的列大小？

根据之前的计算公式如下：

Ca (aside column) = (Dx + F/3)
Cm (main column) = (Dy + 2*F/3)/2

F 是由 (W - Dx - Dy) 定义的免费 space，其中 W 是容器宽度。现在我们想要Ca = Cm，在一些数学知识之后我们将拥有。

Dx = Dy/2

所以我们只需要让第一个 div 比第二个大两倍：

.container {
  display: grid;
  width:600px;
}

main {
  grid-column: 1 / 3;
}
main > div {
  width:calc(2*var(--s));
  height:50px;
  background:red;
}

aside {
  grid-column: 3/ 4;
}
aside > div {
  width:var(--s);
  height:50px;
  background:green;
}

<div class="container" style="--s:50px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>
<div class="container" style="--s:100px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>
<div class="container" style="--s:120px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>
<div class="container" style="--s:200px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>

如果我们尊重两个内容之间的关系，您可以清楚地注意到所有网格都具有相同的列大小（在本例中为 200px）。现在你可以将这个计算扩展到你的真实例子中，你会更好地理解。

顺便说一句，你的例子是一个特例，因为你没有空闲 space 所以 main 中的列的大小将是其内容的大小 div id 为 7，aside 中的一个将是其内容的大小 divid 为 5。

保持 CSS 网格中列之间的比率。网格列是如何计算的？

Maintain ratio between column in CSS grid. How grid-column is calculated?

html

css

overflow

css-grid