Grid html: Basic concepts of grid layout — CSS: Cascading Style Sheets — Вебджем.рф

Содержание

Grid Layout Module CSS уроки для начинающих академия

❮ Назад Дальше ❯

Main

Right

Компоновка сетки

Модуль макета сетки CSS предлагает систему компоновки на основе сетки, со строками и столбцами, облегчая разработку веб-страниц без использования поплавок и позиционирования.

Поддержка браузера

Свойства сетки поддерживаются во всех современных браузерах.


57.0	16.0	52.0	10	44

Элементы сетки

Макет сетки состоит из родительского элемента с одним или несколькими дочерними элементами.

Пример

Показать свойство

Элемент HTML становится контейнером сетки, задав для свойства display значение Сетка или встроенная Сетка.

Пример

.grid-container {
display: grid;

}

Пример

.grid-container {
display: inline-grid;
}

Все прямые дочерние элементы контейнера Grid автоматически становятся элементами сетки.

Grid Columns

Вертикальная линия элементов сетки называется столбцы.

Grid Rows

Горизонтальная линия элементов сетки называется строки.

Grid Gaps

Пространство между столбцами и строками называется пробелы.

Размер зазора можно изменить с помощью одного из следующих свойств:

grid-column-gap
grid-row-gap
grid-gap

Пример

Свойство Сетка-столбец-зазор задает зазор между столбцами:

.grid-container {
display: grid;
grid-column-gap: 50px;
}

Пример

Свойство Сетка-строка-зазор задает зазор между строками:

.grid-container {
display: grid;
grid-row-gap: 50px;
}

Пример

Свойство Сетка-зазор является сокращенным свойством для свойств сетка- столбец-зазор и сетки-зазоры:

grid-container {
display: grid;
grid-gap: 50px 100px;
}

Пример

Свойство Сетка-зазор можно также использовать для задания зазора строк и разрыва столбца в одном значении:

.grid-container {
display: grid;
grid-gap: 50px;
}

Линии сетки

Линия между столбцами называется строками столбцов.

Линия между строками называется строками строк.

Ссылки на номера строк при размещении элемента сетки в контейнере сетки:

Пример

Поместите элемент сетки в строку столбца 1 и пусть он заканчивается на строке 3 столбца:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

Пример

Поместите элемент сетки в строку 1 строки и пусть он заканчивается на строке 3 строки:

.item1 {
grid-row-start: 1;
grid-row-end: 3;
}

❮ Назад Дальше ❯

Работа с сеткой | CSS: Вёрстка на Grid

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

В уроке, посвящённом терминологии модуля Grid уже демонстрировался блог Hexlet и пример сетки, которую он использует. Вы могли заметить, что помимо непосредственно полос, по которым выстраивается контент, в этой сетке были использованы отступы между полосами. На изображении они были выделены оранжевым цветом.

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

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

Перейдём от теории к практике. Возьмём один из примеров, который был в прошлых уроках. В нём представлена типичная схема двухколоночного макета, который часто встречается в разработке. Для удобства работы в данном уроке, помимо определения Grid-областей, укажем ширину каждой колонки в 100 пикселей:

Обратите особое внимание на совместную работу свойств grid-template-areas, grid-template-columns/grid-template-rows. Как видно, они не являются заменой друг друга, а прекрасно работают в связке.

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

Для решения задачи создания отступов между Grid-полосами существует 2 свойства: grid-column-gap и grid-row-gap. Как можно догадаться из названия, первое свойство отвечает за отступ между колонками, а второе свойство — за отступ между рядами. В качестве значения свойства выступает любая доступная в CSS единица измерения. Будь то пиксели, проценты или любые другие единицы измерения.

Создадим в нашем двухколоночном макете отступ между колонками в 30 пикселей. Для этого необходимо у контейнера выставить необходимое значение.

Если взглянуть на получившийся макет с помощью Chrome DevTools, то получим следующее:

Обратите внимание на отступы между колонками и на то, что несмотря на них, не появилось никаких отступов внутри элементов.

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

На самом деле свойства grid-column-gap и grid-row-gap потихоньку выводятся из стандарта. В спецификации CSS появляется возможность задавать точно такие же отступы в модуле Flex, чтобы уйти от текущих проблем с отрицательными отступами при создании макетов. По этой причине было принято решение сделать одни правила и для Flex, и для Grid. Новые версии свойств избавились от приставки grid-* и именуются просто column-gap и row-gap.

Для удобства, разработчики CSS Grid Layout добавили сокращённое свойство grid-gap (или просто gap) для возможности указать отступы между колонками и рядами в одном единственном свойстве. Свойство grid-gap может принимать 2 значения:

Отступ между рядами.
Отступ между колонками.

Если указать только одно значение в свойстве, то браузер выставит данный отступ и для колонок, и для рядов.

Позиционирование полос

В CSS Grid Layout есть два свойства, позволяющие автоматически выровнять полосы внутри контейнера. Это свойства justify-content и align-content. Ничего не напоминает? Те, кто проходил курс по Flex конечно же узнали эти свойства. Теперь вы можете увидеть, как тесно между собой связаны модули CSS Flexible Box Layout и CSS Grid Layout. Разрабатывая с использованием этих двух модулей, вы часто будете пользоваться одинаковыми свойствами, которые, как не трудно догадаться, имеют и одинаковые значения. Посмотрим на них. В качестве примера возьмём 3 полосы, каждую из которых покрасим в свой цвет, чтобы более явно видеть разницу. Сам контейнер покрасим в серый цвет, чтобы видеть его ширину.

justify-content

Свойство justify-content позволяет выровнять Grid-полосы по горизонтали. То есть выравниваются колонки относительно контейнера. Как и в модуле Flex, свойство justify-content может принимать следующие значения:

start — это нормальное поведение элементов внутри контейнера. Все наши столбцы стартуют от левого края и идут по горизонтали друг за другом. Примеры в данном случае излишние.

end — При данном значении все элементы внутри контейнера сместятся к правой границе.

center — как видно из названия, все элементы внутри контейнера будут отцентрованы внутри контейнера.

stretch — Данное значение свойства является значением по умолчанию, когда колонкам не выставлена фиксированная ширина. Чтобы визуализировать это, изменим немного пример. Сделаем колонки с автоматической шириной. Блоки с тёмной границей являются элементами контейнера. Каждый элемент имеет ширину и высоту по 40 пикселей.

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

space-around. Здесь всё работает точно так же, как и во Flex. Значение space-around сделает равные отступы между колонками и половину этого расстояния по краям контейнера.

space-evenly. Значение работает так же, как и space-around за одним исключением — отступы по краям контейнера выставляются не в половину расстояния между элементами, а в полную ширину.

space-between. При этом значении все элементы получают одинаковое расстояние между собой. При этом нет никаких отступов от краёв. Первый и последний элемент прижимаются к краям контейнера. Если таких элемента всего два, то они расположатся по краям контейнера.

align-content

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Элемент сетки CSS

❮ Предыдущий Следующий ❯

Попробуй сам »

Дочерние элементы (элементы)

Контейнер сетки содержит элементы сетки .

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

Свойство grid-column:

Свойство grid-column определяет, на каком столбец (столбцы) для размещения элемента.

Вы определяете, где элемент начнется и где элемент закончится.

Примечание: Свойство grid-column является сокращенным свойством для свойства grid-column-start и grid-column-end .

Чтобы разместить элемент, вы можете обратиться к номерам строк или использовать ключевое слово «промежуток», чтобы определить, сколько столбцов будет охватывать элемент.

Пример

Сделать так, чтобы «item1» начинался в столбце 1 и заканчивался перед столбцом 5:

.элемент1 {
сетка-столбец: 1/5;

}

Попробуй сам »

Пример

Заставить «item1» начинаться со столбца 1 и охватывать 3 столбца:

. item1 {
сетка-столбец: 1 / пролет 3;
}

Попробуй сам »

Пример

Сделать так, чтобы «item2» начинался со столбца 2 и занимал 3 столбца:

.item2 {
сетка-столбец: 2 / пролет 3;
}

Попробуй сам »

Свойство строки сетки:

Свойство grid-row определяет, в какой строке разместить предмет.

Вы определяете, где элемент начнется и где элемент закончится.

Примечание: Свойство grid-row является сокращенным свойством для свойства grid-row-start и grid-row-end .

Чтобы разместить элемент, вы можете обратиться к номерам строк или использовать ключевое слово «промежуток», чтобы определить, сколько строк будет охватывать элемент:

Пример

Сделать так, чтобы «item1» начинался в строке 1 и заканчивался в строке 4:

.item1 {
сетка-ряд: 1/4;
}

Попробуй сам »

Пример

Сделать так, чтобы «item1» начинался с первой строки и занимал 2 строки:

. item1 {
сетка-ряд: 1/промежуток 2;
}

Попробуй сам »

Свойство grid-area

Свойство grid-area можно использовать как сокращенное свойство для сетка-строка-начало , grid-column-start , grid-row-end и свойства grid-column-end .

Пример

Сделать так, чтобы «item8» начинался в строке 1 и строке столбца 2 и заканчивался в строке 5 и строке столбца 6:

.item8 {
площадь сетки: 1/2/5/6;
}

Попробуй сам »

Пример

Сделать так, чтобы «item8» начинался со строки строки 2 и строки столбца 1 и занимал 2 строки и 3 столбца:

.item8 {
площадь сетки: 2 / 1 / пролет 2 / пролет 3;
}

Попробуй сам »

Именование элементов сетки

Свойство grid-area также можно использовать для присвоения имен элементам сетки.

Main

Right

На именованные элементы сетки можно ссылаться с помощью свойства grid-template-areas контейнера сетки.

Пример

Item1 получает имя «myArea» и охватывает все пять столбцов в сетке из пяти столбцов:

.item1 {
область сетки: моя территория;
}
.grid-container {
grid-template-areas: ‘myArea myArea моя область моя область моя область’;
}

Попробуй сам »

Каждая строка определяется апострофами (‘ ‘)

Столбцы в каждой строке определяются внутри апострофов, разделенных символом космос.

Примечание: Знак точки представляет элемент сетки без имени.

Пример

Пусть «myArea» охватывает два столбца в сетке из пяти столбцов (знаки точки представляют предметы без имени):

.item1 {
область сетки: моя территория;
}
.grid-container {
grid-template-areas: ‘myArea myArea . . .’;
}

Попробуй сам »

Чтобы определить две строки, определите столбец второй строки внутри другого набора апострофов:

Пример

Сделать «item1» охватом двух столбцов и двух строк:

. grid-container {
grid-template- области: ‘myArea myArea . . .’ ‘моя область моя область . . .’;
}

Попробуй сам »

Пример

Назовите все элементы и создайте готовый к использованию шаблон веб-страницы:

.item1 {область сетки: заголовок; }
.item2 { область сетки: меню; }
.item3 { область сетки: основная; }
.item4 {область сетки: справа; }
.item5 {область сетки: нижний колонтитул; }

.grid-container {
области шаблона сетки:
‘header header header header header’
‘меню главное main main right’
‘menu footer footer footer footer нижний колонтитул;
}

Попробуй сам »

Порядок элементов

Сетка позволяет нам размещать элементы в любом месте.

Первый элемент в HTML-коде не обязательно должен отображаться как первый элемент в сетке.

Пример

.item1 { grid-area: 1 / 3 / 2 / 4; }
. item2 { область сетки: 2/3/3/4; }
.item3 { область сетки: 1 / 1 / 2 / 2; }
.item4 { область сетки: 1/2/2/3; }
.item5 {площадь сетки: 2/1/3/2; }
.item6 {площадь сетки: 2/2/3/3; }

Попробуй сам »

Вы можете изменить порядок для определенных размеров экрана с помощью медиа-запросов:

Пример

@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / размах 3/2/4; }
.item2 { область сетки: 3 / 3 / 4 / 4; }
.item3 {площадь сетки: 2/1/3/2; }
.item4 { область сетки: 2 / 2 / пролет 2/3; }
.item5 { область сетки: 3 / 1 / 4 / 2; }
.item6 {площадь сетки: 2/3/3/4; }
}

Попробуй сам »

❮ Предыдущий Далее ❯

Grid by Example — примеры использования CSS Grid Layout

Следующие примеры содержат изображение того, как пример должен выглядеть в поддерживаемом браузере, каждый из них ссылается на страницу с дополнительной информацией о демонстрируемом методе, код и CodePen примера. Если не указано иное, эти примеры работают в любом браузере, поддерживающем актуальную спецификацию Grid. Они не будут работать в IE10 или 11.

Примеры макетов страниц см. здесь.

Определение сетки

Чтобы определить сетку, используйте новые значения свойства отображения `grid` или `inline-grid`. Затем вы можете создавать дорожки столбцов и строк.