Построение сеток CSS Grid — простые именованные области

Построение сеток CSS Grid — простые именованные области

От автора: я представляю себе именованные области в 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.