Почему принудительная горизонтальная прокрутка на двух 50% столбцах сетки CSS? - PullRequest
Новая
       42

Почему принудительная горизонтальная прокрутка на двух 50% столбцах сетки CSS?

0 голосов
/ 17 сентября 2018

Почему при явной настройке двух столбцов CSS-таблицы на 50% каждый создает горизонтальную прокрутку, превышающую 100% ширины области просмотра?

В этом коде показано поведение, о котором я спрашиваю.

Обычно, когда для сетки задано следующее css, создается двухколоночная компоновка без принудительной горизонтальной прокрутки за пределами ширины области просмотра: 

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50%;
  grid-template-areas: 'item item';
}

Когда grid-template-columns изменяется для явного задания ширины обоих столбцов, результатом является двухколонный макет с горизонтальной прокруткой : 

.grid {
  grid-template-columns: 50% 50%;
}

Почему горизонтальная прокрутка присутствует во втором контексте, а не в первом?

edit: <aside> Кажется, я помню, что flexbox ведет себя аналогично </aside>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.grid {
  padding-top: 1rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50%;
  grid-template-areas: 'item item';
}

/* WHY THE HORIZONTAL SCROLL 
   WHEN LINES 21-23 ARE
   UNCOMMENTED?! */

/* .grid {
  grid-template-columns: 50% 50%;
} */

.item {
  padding: 2rem;
  border: 2px solid black;
  border-radius: 0.25rem;
}

.p1 {
  padding: .5rem;
}

code {
  padding: .5rem;
  background: gray;
  color: white;
  font-weight: regular;
}
<header class="p1">
  <h1>Why does the horizontal scroll happen when <code>.grid { grid-template-columns: 50% 50%; }</code></h1>
  <p>Uncomment lines 21-23 in the CSS of this codepen to set the above <code>.grid</code> css rule. See this <a href="https://stackoverflow.com/q/52374483/2145103">Stack Overflow post for discussion.</a></p>
</header>
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

1 Ответ

0 голосов
/ 17 сентября 2018

Ваш код (версия 1): 

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50%;
  grid-template-areas: 'item item';
}

Это не приведет к переполнению контейнера.

Два явных столбца создаются grid-template-areas.

ПервыйШирина столбца установлена ​​от grid-template-columns до 50%.

Ширина второго столбца не задана.Таким образом, grid-template-columns вычисляет до none ( spec ).

Спецификация grid , по-видимому, не дает подробных сведений о том, как следует применять grid-template-columns: noneна явный трек.Но вот что делают Chrome, Firefox и Edge:

  • Несмотря на то, что второй столбец является явным, потому что он определен как grid-template-areas, для целей определения размера дорожки он считается implicit, потому чтоgrid-template-columns не было определено.

  • Поэтому размер второго столбца равен grid-auto-columns, функция определения размера для неявных столбцов ( demo ).

  • Значением по умолчанию grid-auto-columns является auto ( spec ), которое во многих случаях выглядит как 1fr, по определению ).

  • Таким образом, второй столбец занимает только оставшееся пространство, в результате чего он заполняет строку.Переполнение не инициируется.

Ваш код (версия 2): 

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'item item';
}

Этот код намного проще следовать.Да, это явно переполнит контейнер: 

50% + 50% + 1rem > 100%

Связанный:

...