От автора: я представляю себе именованные области в CSS Grids, как привнесение собственного синтаксиса. Это строго не необходимо (вы можете выразить размещение сетки другими способами), но это может сделать это размещение более интуитивно понятным. И, эй, если я ошибаюсь, поправьте меня в комментариях.
Возьмем за пример построение сеток CSS Grid с тремя столбцами:
.grid { display: grid; grid-gap: 1rem; grid-template-columns: 200px 1fr 1fr;
}
Никаких строк не определено; они неявные и добавляются по мере необходимости. Мы могли бы определить их, просто не делаем этого, потому что, как и большинство в случаев в веб-дизайне, нам все равно, насколько высоки элементы: высота будет увеличиваться по мере необходимости, чтобы разместить контент.
Теперь, как мы помещаем что-то в самую верхнюю левую позицию? Мы могли бы сказать, что сетка будет размещаться так:
.item { grid-column: 1 / 2; /* начинается на первой строке столбца сетки и заканчивается на второй */
}
Это работает, хотя лучше бы .item был первым дочерним элементом .grid. В противном случае там может быть помещено что-то другое, и .item будет удаляться до следующей открытой строки. Если мы хотим быть уверенными, что он будет размещаться в верхнем левом углу, мы могли бы также создать строку:
.item { grid-column: 1 / 2; grid-row: 1 / 2;
}
Теперь он наверняка будет в верхнем левом углу, даже если там размещены другие элементы (они просто перекрываются). Мы можем даже сократить код с помощью свойства grid-area:
.item { grid-area: 1 / 1 / 2 / 2;
}
Все эти 1 и 2 могут быть достаточно интуитивными на данный момент, но числа становятся большими в более сложными сетках, включающих размещение столбцов и линий. Посмотрите этот пример. Хотя мы определяем столбцы, мы можем назвать их с помощью отдельных свойств:
.grid { display: grid; grid-gap: 1rem; grid-template-columns: 200px 1fr 1fr; grid-template-areas: "pro a b" "pro c d";
}
Каждая группа в кавычках в grid-template-areas — это строка. Внутри располагаются имена, которые я только что составил. Это может быть, почти все, если это имеет смысл для вас. Посмотрите, как слово «pro» повторяется дважды на двух строках? Это важно, так как это говорит о том, что мы можем разместить элемент сетки там, где есть это значение «pro», и оно будет в первом из трех столбцов и будет охватывать две строки. Довольно интуитивно, да?
Мы размещаем его так:
.pro-features { /* вместо этого */ grid-area: 1 / 1 / 2 / 3; /* мы можем сделать это */ grid-area: pro;
}
Вот простой пример:
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
