Поддерживать соотношение между столбцами в сетке 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>

Я пытался использовать "перенос слов: разрыв слов", "разрыв слов: разрыв всех", "пробел: нормальный", "overflow-wrap: break-word "," overflow: hidden ", но ни один из них не сработал.

Как сделать так, чтобы текст либо обернулся в сетке, либо скрыл переполнение?

Answer 1

Это логичное поведение, и вам просто нужно понять, как рассчитываются различные размеры, и, учитывая вашу конфигурацию, соотношение не будет.

Давайте начнем с простого примера:

.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, и не все они имеют одинаковый размер:

Вычисления, сделанные здесь, несколько сложны ¹ и зависят от содержимого .Если мы ссылаемся на спецификацию :

После размещения элементов сетки вычисляются размеры дорожек сетки (строк и столбцов), с учетомразмеры их содержимого и / или доступное пространство , как указано в определении сетки .

Мы ничего не указали в определении сетки, поэтому здесь будет определять только размер контента,Вы можете четко это заметить, если просто измените содержимое без необходимости использовать длинные предложения:

.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 будут иметьсвободное пространство 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), где 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.

Answer 2

Я добавил 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>