CSS Grid — это двухмерная система макетов на основе сетки, которая позволяет создавать организованные и гибкие макеты веб-сайтов. Думайте об этом как о сетке столбцы и строки который вы можете использовать для позиционирования и упорядочения элементов веб-страницы. Однако, в отличие от таблиц HTML, макеты CSS Grid управляются с помощью CSS, а не HTML-разметки. Это делает CSS Grid чрезвычайно гибким для адаптивного веб-дизайна.
Как работает CSS Grid Blocs
При работе с CSS Grid внутри BlocsВажно учитывать, что макет Grid состоит из двух основных элементов: родительского контейнера сетки и, в большинстве случаев, нескольких внутренних дочерних контейнеров.
Родительский Grid-контейнер
Родительский контейнер сетки отвечает за основную информацию о макете. Например, к этому элементу применяются количество столбцов/строк и соответствующие им размеры промежутков.
Дочерний контейнер Grid
Внутренние дочерние контейнеры — это блоки, в которые вы обычно помещаете элементы интерфейса вашего веб-сайта. По умолчанию для этих контейнеров установлено значение автопоток (вписываются в сетку), однако их можно настроить с помощью пользовательских классов, чтобы их можно было позиционировать самыми разными способами внутри родительского контейнера сетки.
Вы можете узнать больше о позиционировании дочерних контейнеров. здесь.
Добавьте контейнер сетки
Вы можете начать использовать CSS Grid в своем Blocs проект, либо добавив контейнер CSS Grid, используя выделенный Bric.
Или, альтернативно, выбрав Div Bric и установив его напишите в Grid-контейнер.
Макет CSS Grid по умолчанию в Blocs это два столбца по две строки. Когда макет каким-либо образом корректируется, например путем добавления дополнительных столбцов или строк, эта настроенная информация о макете сохраняется в специальном классе, который автоматически применяется к контейнеру CSS Grid.
Также стоит отметить, что столбцы имеют ширину 1fr и строки имеют высоту, установленную на автоматический по умолчанию.
Колонки
Столбцы — это вертикальное разделение пространства в макете CSS Grid. Они особенно полезны для направления взгляда зрителя, оптимизации читаемости и эффективного использования пространства.
Добавить столбец
Дополнительные столбцы можно добавить в контейнер CSS Grid, нажав кнопку «плюс». + расположен в правом верхнем углу элементов управления выбором сетки.
Удалить столбец
Столбцы можно удалить из контейнера CSS Grid, нажав кнопку корзины, расположенную в левом верхнем углу контроллера ширины столбца.
Когда количество столбцы or строки настраивается, если дочерних контейнеров недостаточно для корректного отображения макета, Blocs автоматически вставит их в контейнер CSS Grid.
Также важно помнить, что CSS Grid использует чистый CSS для управления макетом, что означает, что столбцы можно добавлять и удалять. за точку останова.
Ширина столбца
По умолчанию ширина столбца установлена на 1fr в контейнерах CSS Grid внутри Blocs, fr единица означает дробь. Он представляет собой часть доступного пространства в контейнере сетки.
При использовании для ширины столбца 1fr означает, что столбец будет занимать одну часть общего доступного пространства. Если в нескольких столбцах используется fr единица измерения, пространство делится в соответствии со значением дроби каждого столбца относительно суммы значений дроби всех столбцов.
Ширину столбца можно регулировать для каждой точки останова с помощью маркера изменения размера, расположенного на элементе управления шириной столбца. Перетаскивание этого маркера оставил or правую скорректирует fr значение для связанного столбца с шагом 0.5.
Столбец разрыв
Вы можете установить расстояние между столбцы в каждой точке останова, перетаскивая пустое пространство между столбцами внутри контейнера сетки на холсте дизайна.
Вы также можете сбросить измерение зазора между столбцами контейнера CSS Grid, выполнив правый щелчок в пространстве между столбцами и выбрав Сбросить ширину.
Ряды
Строки — это горизонтальное разделение пространства в макете CSS Grid. Они обеспечивают логическое перемещение контента и визуальное выравнивание.
Добавить строку
Дополнительные строки можно добавить в контейнер CSS Grid, нажав кнопку «плюс». + расположен в левом нижнем углу элементов управления выбором сетки.
Строки работают немного иначе, чем столбцы, хотя вы можете добавить больше строк. Обычно количество строк рассчитывается и автоматически корректируется в зависимости от количества столбцов и дочерних контейнеров в родительском контейнере сетки.
Удалить строку
Процесс удаления строк немного отличается от удаления столбцов. Удалить строки возможно только в том случае, если количество дочерних контейнеров отрицательно для количества строк в макете сетки.
Если количество дочерних контейнеров для строки отрицательное, кнопка корзины будет отображаться на верхнем крае элемента управления высотой строки (в которой нет дочерних контейнеров). Нажатие этой кнопки приведет к удалению строки.
Высота строки
Высота строки по умолчанию установлена на автоматический в контейнерах CSS Grid внутри Blocs, автоматический unit по сути сообщает сетке автоматически определять высоту этой строки на основе ее содержимого. Другими словами, высота строки будет равна высоте самой высокой части содержимого внутри дочерних контейнеров сетки этой строки.
Высоту столбца можно регулировать для каждой точки останова с помощью маркера изменения размера, расположенного на элементе управления высотой строки. Перетаскивание этого маркера up or вниз отрегулирует высоту строки в пикселей.
Хотя этот параметр доступен, рекомендуется использовать автоматический для высоты строк, так как это более гибко с точки зрения отзывчивости макета.
Разрыв между строками
Вы можете установить расстояние между строки на каждой точке останова, перетаскивая пустое пространство между строками в контейнере CSS Grid на холсте дизайна.
Вы также можете сбросить измерение разрыва между строками контейнера CSS Grid, выполнив правый щелчок в пространстве между столбцами и выбрав Сбросить высоту.
Размещение дочерних контейнеров
По умолчанию для этих контейнеров установлено значение автопоток (вписываются в сетку), однако их можно настроить независимо с помощью пользовательских классов, чтобы расположить их внутри родительского контейнера сетки.
Чтобы настроить расположение дочернего контейнера сетки внутри сетки, необходимо сначала выбрать его и применить пользовательский класс.
Посмотрите на график Редактор классов, теперь можно применять значения к Элемент сетки правила для выбранного дочернего контейнера, чтобы разместить его в соответствующем родительском контейнере CSS Grid.
Начало столбца
Ассоциация начало сетки-столбца Свойство используется для указания линии сетки столбцов, где начинается элемент сетки в макете сетки.
Конец столбца
Ассоциация конец столбца сетки Свойство используется для указания количества столбцов, охватываемых элементом, или линии сетки столбцов, где элемент сетки заканчивается в макете сетки.
Начало строки
Ассоциация начало строки сетки Свойство используется для указания линии сетки строк, где начинается элемент сетки в макете сетки.
Конец строки
Ассоциация конец строки сетки Свойство используется для указания количества строк, которые будет охватывать элемент, или линии строки, где заканчивается элемент сетки в макете сетки.
Методы позиционирования
Используя свойства начала столбца, конца столбца, начала строки и конца строки, можно размещать дочерние контейнеры внутри родительского контейнера CSS Grid. Вот несколько распространенных примеров методов позиционирования дочерних элементов сетки.
Все приведенные здесь примеры можно изучить далее в этом разделе. Blocs пример проекта.
Промежуточные столбцы
Чтобы охватить дочерний контейнер сетки несколькими столбцами, примените класс к дочернему контейнеру, а затем установите Элементы сетки > Столбец > Конец значение поля в пролет за которым следует количество столбцов, по которым вы хотите охватить дочерний элемент.
Пролетать строки
Чтобы распределить дочерний контейнер сетки по нескольким строкам, примените класс к дочернему контейнеру, а затем установите Элементы сетки > Строка > Конец значение поля в пролет за которым следует количество строк, на которые вы хотите охватить дочерний элемент.
Изменить горизонтальное положение
В этом примере фиолетовый дочерний контейнер изначально находится в первой горизонтальной позиции в сетке, а с помощью специального класса он перемещен прямо во вторую горизонтальную позицию или во второй столбец.
Чтобы расположить дочерний контейнер сетки горизонтально, примените класс к дочернему контейнеру, а затем установите Элементы сетки > Столбец > Начало значение поля на номер столбца, в котором вы хотите его поместить. Также важно установить Элементы сетки > Строка > Начало значение поля на номер строки, в которой вы хотите, чтобы оно оставалось.
Изменить вертикальное положение
В этом примере фиолетовый дочерний контейнер изначально находится в первой вертикальной позиции в сетке, но с помощью специального класса он переместился во вторую вертикальную позицию.
Чтобы расположить дочерний контейнер сетки вертикально, примените класс к дочернему контейнеру, а затем установите Элементы сетки > Строка > Начало значение поля на номер строки, в которую вы хотите его поместить.
При размещении дочерних контейнеров сетки важно учитывать, что к другим дочерним контейнерам в сетке могут применяться конфликтующие правила позиционирования классов, что может привести к нежелательным ошибкам макета. Позаботьтесь о том, чтобы ваши классы сетки были организованы, чтобы избежать путаницы при создании с помощью CSS Grid.
Дальнейшее чтение
Эта статья предназначена для новичков, которые делают первые шаги в использовании CSS Grid. Если вы ищете более глубокую и расширенную информацию о CSS Grid, мы рекомендуем прочитать это вводное руководство на CSS-сетка из хитростей CSS.