保持CSS网格中各列之间的比率.网格列如何计算? [英] Maintain ratio between column in CSS grid. How grid-column is calculated?
问题描述
我希望网格保持一定比例，但是长句子会增加其所属网格的宽度.
I want my grid to maintain a certain ratio, but a long sentence increases the width of the grid it belongs to.
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>
我尝试使用自动换行:break-word"，自动换行:break-all"，空白:正常"，溢出自动换行:break-word"，溢出:隐藏"，但他们都没有工作.
I tried using "word-wrap: break-word", "word-break: break-all", "white-space: normal", "overflow-wrap: break-word", "overflow: hidden", but none of them worked.
我如何将文本换行到网格中或隐藏溢出?
How do I have the text either wrap within the grid or have the overflow hidden?
推荐答案
这是一种逻辑行为，您只需要了解不同大小的计算方式，并考虑到您的配置将没有任何比例.
This is a logical behavior and you simply need to understand how the different sizes are calculated and considering you configuration there will be no ratio.
让我们从一个简单的示例开始:
Let's start with an easy example:
.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列或它们都需要具有相同的大小.这是隐式定义的.
We have defined a grid-column:1/8 thus we will implicitely have 7 columns and the size of each one will be calculated based on the content. In this case, it's trivial as we will have the same size of each column. Basically we didn't specify that our grid need to have 7 columns or that they all need to have the same size. This was implicitely defined.
此隐式网格稍后将用于放置其他元素:
This implicit grid will later be used to place other elements:
.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将放置在先前定义的第一列上.
As you can see, the red div will be placed on the first column defined previously.
现在让我们添加另一个元素:
Now let's add another element:
.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，但并非所有列的大小都相等:
This is a more complex situation where will have a total number of columns equal to 12 and not all of them are equal size:
此处进行的计算在某种程度上是复杂的 1 ，并且取决于内容.如果我们参考规范:
The calculation done here is somehow complex 1 and depends on the content. If we refer to 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.
我们没有在网格定义中指定任何内容，因此仅内容大小将在此处确定.如果您只需要更改内容而无需使用长句，则可以清楚地注意到这一点:
We did specify nothing in the grid definition so only the content size will decide here. You can clearly notice this if you simply change the content without the need of using long sentences:
.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>
每次我们使用不同的内容，每次我们使用不同的大小.
Each time we used a different content and each time we obtain a different size.
为避免这种情况，您需要明确定义网格的大小.对于您的情况，您希望有12列，第一列为7，第二列为5.您可以这样简单地完成操作:
To avoid this you need to explicitely define the size of your grid. In your case, you want to have 12 columns with the first item taking 7 and the second one 5. You can simply do like this:
.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 让我们举一个简单的例子来了解如何进行计算:
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.
In this example, we have a grid width equal to 600px, the first element 50px and the second one 100px we will have a free space of 450px. The implicit grid contain 3 columns, so we split this space into 3. One portion will got to the aside (100px + 150px = 250px) thus we will have a column equal to 250px containing an element equal to 100px. The two other portions will go to main (50px + 2*150px = 350px) thus will have each column equal to 175px.
让我们做相反的事情.为了获得相同的列大小，我们的div的大小应该是多少?
Let's do the opposite. what should be the size of our divs in order to obtain the same column sizes?
基于先前的计算，公式如下:
Based on the previous calculation the formula is like below:
Ca (aside column) = (Dx + F/3)
Cm (main column) = (Dy + 2*F/3)/2
F是由(W - Dx - Dy)定义的可用空间，其中<c28>是容器的宽度.现在我们想拥有Ca = Cm，经过一些数学的学习，我们将拥有.
F is our free space defined by (W - Dx - Dy) where W is the container width. Now we want to have Ca = Cm and after some math stuff we will have.
Dx = Dy/2
所以我们只需要使第一个div比第二个大两倍:
So we simply need to make the first div twice bigger than the second one:
.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).现在，您可以将此计算结果扩展到您的实际示例，您将更好地理解.
You can clearly notice that all the grids have the same column size (200px in this case) if we respect the relation between both content. Now you can scale this calculaion to your real example and you will better understand.
顺便说一句，您的示例是一个特例，因为您没有可用空间，所以main中列的大小将为其内容的大小除以7，而aside中的一列将为其内容的大小除以5.
By the way, you example is a particular case, since you have no free space so the size of the column in main will be the size of its content divided by 7 and the one of aside will be the size of its content divided by 5.
这篇关于保持CSS网格中各列之间的比率.网格列如何计算?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
