Узнайте, как создавать двумерные веб-сайты с помощью CSS Grid

3 апреля, 2021 Дядя Влад

С помощью CSS Grid вы можете создавать двухмерные макеты веб-сайтов вдвое быстрее, чем обычно.

CSS Grid является преемником системы макета с плавающей запятой, и хотя все еще есть случаи, когда использование структуры макета с плавающей запятой может оказаться более практичным, чем использование CSS Grid, некоторые разработчики склонны использовать CSS Grid только для структурирования своих веб-сайтов.

Это неудивительно, поскольку CSS Grid – мощный инструмент в вашем арсенале. Это руководство научит вас использовать CSS Grid во всех ваших проектах веб-разработки.

Как работает система сетки CSS

CSS Grid (или просто Grid) – это, по сути, двухмерная система макета веб-сайта, которая используется для структурирования элементов на веб-странице. Система макета CSS Grid построена на концепции «родитель-потомок», в которой у вас будет один основной контейнер (родительский) и несколько различных элементов сетки (дочерние элементы) внутри этого контейнера.

Чтобы использовать CSS Grid на любом веб-сайте, вам сначала нужно инициализировать контейнер Grid. Это делается путем установки для свойства display предполагаемого родительского элемента значение grid.

Пример контейнера сетки CSS

 
selector{
 display: grid;
 }

Селектор может быть элементом HTML, классом или идентификатором; важно то, что он напрямую идентифицирует элемент HTML, который включает в себя все другие элементы HTML на веб-странице.

В структуре макета сетки все элементы в контейнере называются элементами сетки . По умолчанию макет сетки CSS является вертикальным (что также является структурой макета по умолчанию в HTML), поэтому, когда сетка CSS инициализируется с использованием свойства display над макетом элементов сетки, остается прежним (вертикальным).

Чтобы переставить элементы сетки на веб-странице, вам нужно будет использовать свойство grid-template-columns, свойство grid-template-rows или их комбинацию.

Вот почему CSS Grid идентифицируется как система двумерного макета; он позволяет вам структурировать элементы сетки как по горизонтали (строки), так и по вертикали (столбцы) одновременно.

Использование свойства Grid-template-columns

Свойство grid-template-columns всегда следует использовать в элементе контейнера вместе со свойством display. С помощью свойства grid-template-columns вы можете указать количество столбцов в макете CSS Grid одним из нескольких способов.

Один из способов структурировать элементы сетки – использовать пиксели (px).

Пример структурирования элементов сетки с помощью пикселей

 
.gridContainer{
 display: grid;
 grid-template-columns: 400px 400px 400px;
 }

В приведенном выше примере вам нужно отметить две вещи. Во-первых, использование приведенного выше кода создаст на вашей веб-странице три столбца шириной 400 пикселей каждый. Если в вашем контейнере меньше трех элементов сетки, на вашем экране будет отображаться только один или два столбца.

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

Во-вторых, следует отметить, что использование значений px для структурирования элементов сетки – не очень практичный подход. В основном это связано с тем, что блок пикселей не поддерживает адаптивный дизайн .

Вернитесь к примеру выше; если бы у нас было шесть элементов сетки в нашем контейнере, два элемента сетки слева не были бы сразу видны на планшете.

Рекомендуемой альтернативой использованию px (или любого другого фиксированного значения) для компоновки элементов сетки является использование дробей (единиц fr).

Пример использования дробных значений

 
.gridContainer{
 display: grid;
 grid-template-columns: 1fr 2fr;
 }

Приведенный выше код сгенерирует два столбца на предполагаемой веб-странице. Столбец справа будет вдвое шире, чем слева. Основная причина, по которой рекомендуется использовать fr, заключается в том, что fr поддерживает отзывчивость.

Следовательно, независимо от размера экрана устройства, столбец справа всегда будет в два раза больше, чем столбец слева.

Этот макет популярен в тех случаях, когда на веб-странице есть боковой раздел. Столбец меньшего размера будет зарезервирован для раздела aside, который будет содержать контент, связанный с основным потоком, но не являющийся его частью (например, таблица содержания).

Использование свойства Grid-template-rows

Критерии использования свойства grid-template-rows в некоторой степени идентичны критериям свойства grid-template-columns.

Одно очевидное отличие состоит в том, что там, где свойство grid-template-rows создает строки, свойство grid-template-columns создает столбцы. Однако есть и другие, более тонкие различия между этими двумя свойствами (например, неявные строки и общая структура строк).

Структура строк

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

Это не относится к свойству grid-template-rows . Рассмотрим следующий пример.

Пример строки шаблона сетки

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 }

Если приведенный выше код CSS создан для таргетинга на HTML-документ, содержащий пять тегов <div> , каждый из которых является прямым потомком элемента класса gridContainer, тогда первый элемент будет иметь высоту по умолчанию, а второй элемент будет иметь высоту, равную в три раза больше первого.

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

Эти неявные строки могут быть нацелены с помощью свойства grid-auto-rows .

Использование свойства Grid-auto-rows

Свойство grid-auto-rows часто используется для присвоения высоты строкам в сетке, которые выходят за пределы диапазона свойства grid-template-rows .

Пример автоматической строки сетки

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 grid-auto-rows: 3fr;
 }

Если приведенный выше код CSS используется для таргетинга на контейнер, который непосредственно включает пять элементов сетки, свойство grid-template-rows выше будет применяться к первым двум элементам сетки, а свойство grid-auto-row будет применяться к другим трем. elements – эффективное решение проблемы неявных строк.

Хотя вы можете использовать grid-template-row и grid-template-columns по отдельности, когда это необходимо, рекомендуется использовать CSS Grid, когда требуются двумерные макеты (строки и столбцы). Если требуется только одномерный макет (строки или столбцы), то структура макета с плавающей запятой будет гораздо лучшим вариантом.

Структурирование макета вашего веб-сайта никогда не было таким простым

С помощью CSS Grid вы можете создать двухмерный веб-сайт, основанный на концепции родитель-потомок. Чтобы это стало возможным, вам нужно помнить следующее:

Назначение значения сетки свойству отображения в элементе контейнера.
Использование grid-template-rows и grid-template-columns в элементе контейнера.
Использование свойства grid-auto-row, когда количество элементов в элементе контейнера превышает целевое значение свойства grid-template-rows .

Последний вывод – убедиться, что вы эффективно используете CSS Grid в двумерных структурах макета. Когда требуется одномерная структура макета, плавающая структура макета может оказаться лучшим вариантом.