css Grid grid-template-columns: - PullRequest
Новая
       19

css Grid grid-template-columns:

0 голосов
/ 23 июня 2018

Почему это 4 колонки?Я имею в виду, когда я использую flexbox, мы называем это 4 рядами.Теперь строка становится столбцом в сетке CSS?Не могли бы вы объяснить?

Строка горизонтальная.Я использую против кода на моем компьютере 

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

img

1 Ответ

0 голосов
/ 23 июня 2018

Представьте, что на странице есть 4 равномерно распределенные вертикальные линии (первая и последняя строки представляют края содержащего элемента). .item1 и .item5 попадают в первый столбец, .item2 и .item6 во втором и т. Д.

Вы устанавливаете 4 столбца в сетке .grid-container , повторяя 'auto' четыре раза в свойстве grid-template-columns.Другими словами, количество столбцов в сетке определяется количеством значений, установленных в свойстве grid-template-columns.

Вы можете упростить это, используя новую единицу измерения, введенную системой сетки.,Предположим, вы хотите, чтобы второй и четвертый столбцы в вашей сетке были в два раза больше первого и третьего столбцов.Вы можете просто объявить следующее: 

grid-template-columns: 1fr 2fr 1fr 2fr;

Дробные числа указывают, сколько пространства будет использовать каждый столбец относительно размера и количества других столбцов.

Чтобы установить размер и количествостроки в сетке, используйте "grid-template-row"

Для обоих свойств вы также можете передать функцию 'repeat' в качестве значения: 

grid-template-columns: repeat(3, 1fr)

Это эквивалентноустановка "1fr 1fr 1fr" в сеточном контейнере.

...