我希望我的网格保持一定的比例，但是长句子会增加它所属网格的宽度。
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”，但没有他们工作了。
如何让文本在网格内换行或隐藏溢出？
这是一种逻辑行为，您只需要了解如何计算不同的大小，并考虑到您的配置，就不会存在比率。
让我们从一个简单的例子开始：
.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 calculation done here is somehow complex 1 and depends on the content. If we refer to the specification:
放置网格项后，将计算网格轨道（行和列）的大小，考虑其内容的大小和/或可用空间按照网格定义中的指定.
我们没有在网格定义中指定任何内容，因此这里仅决定内容大小。如果你简单地改变内容而不需要使用长句子，你可以清楚地注意到这一点：
.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>1 Let's take an easy example to have an idea how the calculation is done:
.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我们将有一个免费空间450px。隐式网格包含 3 列，因此我们将此空间分成 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) where 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在这种情况下）如果我们尊重两个内容之间的关系。现在您可以将此计算扩展到您的实际示例，您会更好地理解。
顺便说一句，您的示例是一个特殊情况，因为您没有可用空间，所以列的大小main将是其内容的大小除以 7 和其中之一aside将是其内容的大小除以 5。
