Grid

Как создать сетки на CSS Grid Layout

CSS Grid Layout — это способ разметки, который позволяет создавать на странице простые и сложные двумерные сетки. Вы можете добавить любое количество столбцов или строк и указать, сколько ячеек должен занимать каждый элемент.

Например, с помощью гридов легко создать такой раздел:

Как создать сетку на гридах

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

Описать количество и размеры столбцов — grid-template-columns .

Описать количество и размеры строк — grid-template-rows .

Например, так создаётся сетка из двух столбцов шириной 200px и двух строк высотой 150px :

Как задать размеры столбцов и строк

В процентах. Ширина колонки и высота ряда считаются относительно родительского контейнера. Например, grid-template-columns: 50% 50% создаст две одинаковые колонки шириной в половину родительского элемента.

В пикселях. Устанавливает точную ширину столбца или высоту строки — мы так делали в примере с котами: grid-template-columns: 200px 200px .

С помощью ключевого слова auto. Размеры вычисляются автоматически, в зависимости от свободного пространства.

C помощью ключевого слова fr (fraction). Всё пространство в сетке делится на равные доли fr . Например, колонка grid-template-columns: 1fr растянется на всю область родительского контейнера. А если написать grid-template-columns: 1fr 2fr , вы получите две колонки, при этом вторая будет в два раза шире.

Использовать разные значения. Можно смешивать значения, чтобы добиться большей точности или гибкости:

В этом примере мы создаём четыре колонки. У первой фиксированная ширина, последняя занимает 25% пространства, а вторая и третья делят оставшееся пространство на две равные доли.

Как разместить элементы в гриде

По умолчанию все элементы располагаются в гриде слева направо сверху вниз и занимают одну ячейку сетки. Нумерация считается по линиям, как на картинке:

Чтобы расположить элемент в сетке, нужно задать ему координаты. Например, первый кот начинается на линии 1 столбца и линии 1 ряда, а заканчивается на линии 2 столбца и линии 2 ряда. Кот в очках начинается на 3 линии столбца и 1 линии строки, а заканчивается на 4 линии столбца и 2 линии строки.

Также можно использовать обратную нумерацию. Это полезно, например, когда нужно работать с элементами в крайнем правом столбце или нижнем ряду.

Здесь кот в очках находится между линиями столбцов -1 и -2:

Стили для расположения элементов в сетке: grid-column и grid-row

grid-column-start и grid-column-end указывают, в каком столбце начинается элемент и в каком заканчивается. Например:

grid-row-srart и grid-row-end указывают, какие строки занимает элемент. Здесь всё, как со столбцами:

Для этих свойств есть сокращённые записи: grid-column и grid-row . В них можно сразу прописать, на какой линии начинается и заканчивается элемент — это делается через черту, вот так: grid-row: 1/3.

Свойство grid-area и repeat

Свойствоgrid-area

Писать каждый раз начальные и конечные координаты для столбцов и рядов — долго и не всегда удобно. Но можно сократить запись с помощью свойства grid-area , оно объединяет и заменяет grid-column и grid-row .

Свойство grid-area принимает четыре значения, которые разделяются косой чертой: grid-row-start , grid-column-start , grid-row-end и grid-column-end :

Эта же запись в полном варианте:

Ключевое словоrepeat

Второй способ сократить код — использовать ключевое слово repeat . Оно помогает, когда в grid-template-columns или grid-template-columns нужно создать множество одинаковых колонок или рядов:

С ключевым словом repeat код выглядит так:

В скобках после repeat сначала указывается количество строк или столбцов, а затем через запятую пишется их размер.

Границы и отступы

Границы между элементами задаются с помощью свойства gap . Например, gap: 10px добавит отступы между элементами по бокам и сбоку:

Чтобы задать только боковые отступы, используйте grid-column-gap , а для отступов между рядами — grid-row-gap .

Как изменить порядок элементов

Первый — указать расположение элемента с помощью grid-column , grid-row или grid-area . К примеру, у нас есть такой список:

 
Кот Кекс
 
Кот Барсик
 
Кошка Василиса
 
Кот Борис
 
 

На странице он выглядит так:

Поменяем порядок. Сделаем так, чтобы Кекс стал третьим и перешёл на вторую строку. Разметку не меняем, только стили:

С помощью стилей вы можете указать координаты для каждого элемента и даже наложить один элемент на другой, если это нужно.

Второй способ — использовать свойство order . По умолчанию элементы грида имеют order , равный 0 , но это значение можно менять. Например, вот что произойдёт, если мы добавим «Кексу» order: 1 :

Элемент переместится в конец:

Где отточить навык работы с гридами

«Старт в программировании» — курс для новичков. Он научит вас создавать страницы, в том числе строить сетки на флексах и гридах. Курс основан на тренажёрах и мастер-классах.

Grid Garden — интерактивная игра, которая поможет понять основы CSS Grid Layout. Вам предстоит поливать грядки с морковью и уничтожать сорняки с помощью гридов.

Раздело CSS Grid Layout — страница на официальной документации MDN. Поможет расширить знания о гридах и не только.

Grid by Example — на этом сайте вы найдёте множество примеров использования CSS Grid. Все статьи здесь на английском языке, но их можно перевести через переводчик, встроенный в браузер.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Верстаем в сетке

Разбираем, как можно расположить текст и фото в CSS Grid.

Продолжаем сагу о сетках в CSS. Что мы уже знаем:

• Сетка (grid) — это один из современных приёмов вёрстки в CSS.
• Сетку можно поделить на строки и столбцы и задать им любой размер.
• Можно выделить любую область ячеек, объединить их в один класс и управлять ими как одним целым.
• Элементами сетки может быть что угодно — текст, фото, видео или любой другой HTML-блок.
• Сетку можно сделать адаптивной, чтобы страница хорошо смотрелась на экранах любого размера.

Теперь поговорим о том, как размещать контент в ячейках сетки и что для этого нужно. Используем для этого сетку 4 × 4 — каждая ячейка пусть будет по 150 пикселей в высоту и ширину.

        
Элемент 1
 
Элемент 2
 
Элемент 3
 
Элемент 4
 
Элемент 5
 
Элемент 6
 
Элемент 7
 
Элемент 8
 
Элемент 9
 
Элемент 10
 
Элемент 11
 
Элемент 12
 
Элемент 13
 
Элемент 14
 
Элемент 15
 
Элемент 16
 
   

Заполнение блоков по очереди

Самый простой способ добавить что-то в сетку — прописать в блоке , что нам нужно. Например, можем заполнить часть нашей сетки текстом, а часть — картинками:

    body < /*настраиваем шрифт*/ font-family: Arial, Helvetica, sans-serif; >/*общие настройки сетки*/ .grid < /*рисуем зелёные рамки*/ border: 5px solid #d1e231; /*подключаем сетку*/ display: grid; /*формируем по 4 одинаковых строки и столбца*/ grid-template-columns: repeat(4, 150px); grid-template-rows: repeat(4, 150px); >/*внешний вид ячеек*/ .grid > * < /*фоновый цвет*/ background-color: #ffbf94; /*скругление углов*/ border-radius: 5px; /*расстояние от одной границы ячейки до другой*/ margin: 1px; >img < border-radius: 5px; width: 100%; height: 100%; object-fit: cover; >p   
Привет, это журнал «Код!»
 
  
 
 
Элемент 4
 
 
Элемент 5
 
Элемент 6
 
 
 
 
Элемент 10
 
Сейчас все привыкли к тому, что в телефонах много памяти — от 128 гигабайт и выше.
 
Если телефон поддерживает карты памяти большой ёмкости, то можно вставить туда microSD-карточку
 
 
и получить дополнительно хоть терабайт.
 
 
 
 
Но вы видели те карточки? Они же невероятно малы!
 
   

Чтобы картинки у нас подгонялись точно под размер сетки, мы использовали свойство object-fit: cover — оно увеличивает или уменьшает размер картинки так, чтобы она подгонялась под нужное место.

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

(элементы 4,5,6 и 10), текст прижался к краям и выглядит неопрятно.

Работаем с областью

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

Допустим, нам нужно, чтобы самая первая фотография в нашем последнем примере занимала не одну ячейку, а четыре — по две с каждой стороны. Для этого сделаем новую область:

.oblast-1 grid-column: span 2;
grid-row: span 2;
>

Теперь применим этот класс к нашей картинке:

Сетка автоматически передвинула остальные блоки на другие места, потому что у нас появилась новая большая область. Но если мы в HTML-коде переставим эту строку вниз, то и картинка тоже уедет вниз. Вот что произойдёт, если мы передвинем этот блок с картинкой на три строки ниже:

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

.oblast-2 grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
>

Здесь мы говорим браузеру, что область oblast-2 занимает расстояние от первой до третьей линии по горизонтали и от второй до четвёртой по вертикали. Если с линиями пока сложно — почитайте наш вводный материал по сетке, мы там подробно разбираем, что это за линии и откуда они берутся.

После этого мы можем переместить наш блок в любое место в коде, даже опустить в самый низ, и картинка всё равно останется на своём месте:

  
Привет, это журнал «Код!»
 
 
Элемент 4
 
 
Элемент 5
 
Элемент 6
 
 
 
 
Элемент 10
 
Сейчас все привыкли к тому, что в телефонах много памяти — от 128 гигабайт и выше.
 
Если телефон поддерживает карты памяти большой ёмкости, то можно вставить туда microSD-карточку
 
 
и получить дополнительно хоть терабайт.
 
 
 
 
Но вы видели те карточки? Они же невероятно малы!
 
 

А ещё можно сделать один большой блок на всю ширину сетки: объединить 4 ячейки подряд — получится шапка сайта:

.oblast-2 grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 5;
>

Как управлять отдельной ячейкой

Ячейка — это самая маленькая доступная область в сетке. Для этого нужно создать новую область, куда будет входить только эта ячейка, например, так:

.oblast-3 grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
>

Сетка — это универсальный инструмент

В ней можно заверстать что угодно:

• текст в несколько колонок;
• галерею с картинками;
• картинки с поясняющим текстом;
• видео вперемешку с текстом;
• рекламные баннеры;
• полноценный сайт с шапкой, подвалом и боковым меню;
• что угодно ещё.

В финальной статье про сетку мы покажем, как с её помощью можно сделать свой полноценный сайт-портфолио — с навигацией, разделами и красивыми фотографиями.

Текст, иллюстрации и редактура

Источник