Как сделать сетку в браузере
У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых раньше мы могли только мечтать. В прошлый раз мы говорили о CSS-сетке Grid. Сегодня мы её будем настраивать.
- В CSS есть много способов расставить объекты на странице: по абсолютным координатам, относительно друг друга, закрепив в каком-то месте страницы и т. д.
- Один из полезных для веб-разработчика способов — разделить страницу на столбцы и строки, как будто это таблица или сетка. И внутри этой сетки расставить объекты.
- Инструмент Grid как раз помогает нарисовать на странице воображаемую сетку и выравнивать объекты по ней.
- Grid достаточно гибкий, чтобы учесть меняющуюся ширину экрана и предсказуемо управлять столбцами и строками.
Сегодня поработаем с размером ячеек сетки, чтобы в следующий раз собрать из них что-то действительно полезное.
Готовим шаблон
Начнём с пустого шаблона. Чтобы было наглядно видно, как в сетке располагаются ячейки, сделаем так:
- Создадим общий класс, который будет отвечать за сетку целиком. Пока не будем делать разбивку на строки и столбцы.
- В нём сделаем видимые внешние границы — так мы поймём, какого размера сетка у нас получается.
- Каждую ячейку закрасим светло-оранжевым цветом, чтобы видеть, где заканчивается одна ячейка и начинается другая.
- Добавим в оформление ячеек отступы и скругления для красоты.
- После этого в теле страницы создадим новый блок и применим к нему наш стиль с сеткой.
- Добавим 10 новых элементов в сетку и посмотрим, что получится.
Вот что у нас получается, если у сетки не задавать никаких параметров:
- элементы располагаются друг под другом в одну колонку;
- сетка растягивается по ширине на весь экран;
- элементы тоже растягиваются по ширине;
- по высоте сетка занимает ровно столько, чтобы вместить всё содержимое. На всю высоту сетка автоматически не растягивается.
Формируем строки и столбцы
Давайте посмотрим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.
Сделаем в сетке три колонки по 150 пикселей:
grid-template-columns: 150px 150px 150px;
Сетка сразу уменьшилась по высоте, подстраиваясь под количество элементов. Теперь укажем нужную высоту для элементов:
Смотрите, высота поменялась только у первой строки. Остальные остались той же высоты, что и раньше, потому что мы указали только один параметр в команде grid-template-rows. Сделаем 5 строк одинаковой высоты:
grid-template-rows: 50px 50px 50px 50px 50px ;
Так как мы явно указали, что нам в сетке нужно 5 строк, то у нас появилась пустая пятая строка. В ней пока никаких элементов, но сетка уже предусмотрела для них свободное место.
Чтобы не писать пять раз подряд размер 50px, можно использовать такую команду:
grid-template-rows: repeat(5, 50px);
Она повторяет нужный нам размер (50 пикселей) определённое количество раз — в нашем случае это 5 раз. То же самое работает и с колонками — сделаем 4 одинаковые колонки используя функцию repeat():
grid-template-columns: repeat(4, 150px);
Адаптивные размеры и автозаполнение
Теперь сделаем так:
- поставим три строки вместо пяти;
- последнюю строку растянем вниз до конца окна — используем для этого 1fr;
- столбцы сделаем одинаковой ширины.
Запишем это в разделе со стилями:
grid-template-rows: 50px 1fr 50px;
grid-template-columns: repeat(4, 1fr);
Кажется, что 1fr, который должен был растянуть вторую строку на всё свободное место, не работает. Но с ним всё в порядке, ошибки тут нет, смотрите, что произошло на самом деле:
- Первая строка получила ширину 50 пикселей.
- Третья строка тоже получила 50 пикселей.
- После этого браузер, глядя на 1fr, стал высчитывать, какую высоту сделать у второй строки.
- Браузер знает, что 1fr должен заполнить всё оставшееся свободное место в сетке, но у нас нижняя граница сетки прилегает вплотную к последней строке.
- Это значит, что свободного места в сетке нет, поэтому браузер учёл все внутренние отступы из общих настроек ячейки и сделал вторую строку минимальной высоты.
Чтобы сетка растянулась по высоте на всё окно, используют относительные единицы, например, vh — она указывает, сколько процентов от высоты окна будет занимать элемент. Чтобы растянуть сетку до края, напишем:
Полосы прокрутки появились из-за того, что общий размер сетки у нас больше 100% высоты окна — к высоте добавились внешние и внутренние отступы сетки.
Если нам нужно сделать столбцы и строки в определённых пропорциях, также используем fr — он подгонит всё под размер окна:
height: 92vh;
grid-template-columns: 1fr 2fr 2fr 1fr ;
grid-template-rows: 50px 1fr 50px;
Теперь у нас получился красивый шаблон на 12 ячеек:
- верхняя и нижние строки высотой по 50 пикселей;
- средняя растягивается на всю высоту;
- вторая и третья колонки в два раза шире, чем боковые.
Используя нужные размеры, автозаполнение и полезные функции из нашей подборки современных CSS-команд, можно получить любой шаблон для вёрстки страницы.
Что дальше
Статья получилась большой, поэтому про работу с ячейками и областями сетки поговорим в другой раз. А потом сверстаем на сетке полноценную страницу-портфолио.
Подавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.
Если требуется реализовать более сложные сетки, то люди прибегают к помощи фреймворков. Они считают, что сетки это сверх сложная вещь, которую лучше доверить настоящим знатокам CSS. Уверенность в этом укрепляется тем фактом, что большинство сеточных фреймворков, с которыми они имеют дело, являются очень сложными.
В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.
Обертка
Ширина обертки колонок равна ширине её родителя. Можем принять её ширину за 100%. Так как обертка не имеет никакого семантического значения, то для нее мы будем использовать простой div.
Колонки
Давайте начнем с часто применяемого в практике макета, состоящего из: области с основным контентом шириной в 2/3 и бокового блока шириной в 1/3 (от ширины родителя). Для этого мы создадим два div'а с соответствующими классами:
Чтобы расположить их рядом друг с другом мы устанавливаем им свойство float и задаем ширину. Float можно установить сразу нескольким колонкам вот так:
а ширина устанавливается индивидуально:
Вот и вся предпосылка к сеткам без заморочек.
Очистка потока
Отступы между колонками
Отступы между колонками — это самое сложное в сеточном макете. Мы уже сделали нашу сетку «резиновой», задав ширину колонок в процентах. Теперь мы могли бы усложнить всё математическими расчетами и задать ширину в процентах и для отступов между колонками. Лично я не являюсь сторонником таких методов, мне больше нравится задавать фиксированные отступы между колонками. И, к тому же, в этой статье мы стараемся особо не заморачиваться.
В качестве первого шага мы воспользуемся свойством box-sizing со значением border-box. Я люблю применять его ко всем элементам сразу.
Теперь ни отступы, ни границы не будут влиять на размеры элементов.
В качестве второго шага мы устанавливаем фиксированный отступ с правой стороны всем колонкам, кроме самой последней.
Это все, что касается отступов между колонками в самом простом случае.
Внешние отступы
Нужны внешние отступы между колонками? Я использую для этого дополнительный класс:
Первым делом мы добавляем левый отступ обертке колонок (а также верхний и нижний отступ на ваше усмотрение):
Затем вернем правый отступ последней колонке:
Больше различных колонок
Это очень просто:
Можете делать с ними всё, что угодно. Только не забывайте, что сумма дробей не должна превышать единицы. Для этого придется пораскинуть мозгами, но тут нету ничего сложного.
Я не часто им пользуюсь, но весь наш код становиться более компактным благодаря SCSS/Compass:
Модули
При работе с такими сетками я люблю использовать «модули».
Это очень удобно разбивать контент на такие кусочки. Дополнительная польза от них заключается в том, что каждому модулю можно задать отступы, которые будут отделять текст от краев колонок.
Результат
Демонстрацию результата можно посмотреть здесь.
Разборки с браузерами
Код работает отлично в IE 9 версии и выше, а также во всех остальных браузерах. Если вам нужен IE7, то займитесь чем-нибудь другим.
(Следует отметить, что в Опере поддержка дробных значений процентов появиласть только в 12 версии. — прим. пер.)
К слову, модель «гибких блоков» (flexbox, flexible box) в будущем упростит реализацию сеточных макетов и даже улучшит её (самым разным образом, включая возможность перестройки колонок по первому требованию). Но я думаю, что нам потребуется ещё около года, чтобы могли начать хотя бы думать об использовании «гибких блоков».
Информация по теме
Решение для IE8 (добавление от переводчика)
В оригинальной статье автор указал на то, что этот метод отлично работает в Internet Explorer 8 версии. Но он ошибся, т. к. IE8 не поддерживает псевдокласс :last-of-type. Зато он поддерживает псевдокласс :first-child который и поможет нам решить эту проблему.
В CSS меняем :last-of-type на :first-child и вместо правых отступов у колонок устанавливаем левые:
Материал предназначен для дизайнеров и Frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.
С чего все началось
В 2018 мы перешли на реактивные фреймворки. Наш выбор пал в пользу Vue. Мы используем его в наших проектах чаще всего. Нам понравилась экономия времени и сил за счёт компонентного подхода (HTML, CSS, JS в одном файле). Далее мы решили автоматизировать всё, что только можно автоматизировать.
Раньше, когда компания работала на субподряд, к нам приходили макеты от разных веб-студий (мы застали ещё времена макетов в Photoshop). Сетки в этих в макетах были просто ужасны. Например 12 колонок на десктопе, 10 на каких-то промежуточных разрешениях, и 2 колонки на мобильном. Отступы между колонками могли быть абсолютно разными. Всё это сводило нас с ума, потому что каждое новое разрешение — это как вёрстка нового макета. Никакой экономии, никакой выгоды, постоянно нужно доказывать, что это действительно много работы, но нас никто не собирался слушать, потому что макеты и бюджеты уже согласованы.
Как было раньше
Как работает сейчас
Думая о том, как можно снизить расходы на разработку, делать её быстрее, мы задумались о том, что при переходе от дизайнера к разработке заносится больше всего ошибок для вёрстки. Мы начали их искать, и поняли, что сетки — это самое большое зло, которое может быть в нашей совместной работе.
Например, не понятно, на каких разрешениях дизайнер рисует макет 1440 px и на каких разрешениях переходить на макет 768 px. На 1439 px планшетный макет выглядит плохо. Кроме этого есть и другие базовые разрешения, такие, как 1366 px, 1280 px, 1024 px и т.п. Мы пытаемся делать как-то по своему. В итоге получается цепочка итераций переделок и переработок.
Мы подумали: а почему бы не сделать одну сетку и работать с ней? Ведь это должно не сильно повредить дизайнеру в его работе, но при этом очень сильно облегчит работу верстальщика. Так появилась идея стандартизированных резиновых эластичных сеток.
Резиновая верстка — это когда мы перекладываем работу по адаптации макета под доступную ширину браузера, на сам браузер. Достигается это различными CSS-свойствами и единицами измерения: vw, %. При этом макет очень и очень редко масштабируется.
Резиновым макеты делают только по горизонтали. Если мы делаем резиновую верстку по горизонтали и вертикали, то скорее всего перед нами верстка с изменением масштаба, так называемая масштабируемая верстка, она не перестраивает контент.
То есть создавая резиновую верстку, разработчик даже перестроение макета перекладывает на браузер, чтобы все расчеты производились на стороне браузера, таким образом разработчик может не тратить время на “лишние” стили.
Резиновая (называется так потому что тянется, она жидкая, но при этом возвращается в исходное состояние)
Примеры сеток
Вот образец, как обычно рисуются сетки. На 1920px 12 колонок:
На 1440px — 10 колонок, на 768px — 6 колонок, на 320px 2 колонки
Для нас это плохо. Мы решили уйти от этого.
Мы рисуем десятиколоночную сетку. Её легче считать на вёрстке
Далее сжимаем ширину
Мы видим, что масштабируется только ширина колонок, но не отступы колонок (gutter) и margin по краям. Это не позволяет нам нормально использовать сетку, если просто раскопировать первоначальный вариант и уменьшать ширину макета.
Для максимального масштабирования нам нужно, чтобы менялись и gutter и margin, поэтому мы переходим к ручному масштабированию. Для этого мы используем 10 колонок, margin 40px и gutter 30px.
Рассчитаем размеры в процентах. Берём за основу макет 1920px.
margin 40px займёт: 40 / 1920 = 0,020833333333 = 2,083333%
gutter 30px займёт: 30 / 1920 = 0,015625 = 1.5625%
Ширина колонок 157px: 157 / 1920 = 0,08177083333 = 8,177083%
Для проверки можем сложить все размеры:
10 колонок + 9 gutter + 2 margin
(157 * 10) + (30 * 9) + (40 * 2) = 1920px
Итак, у нас есть процентные размеры:
отступ с краю 2,083333%
отступы между колонками 1.5625%
Рассчитаем размеры на макете 1440px:
ширина колонки: 1440 * 8,177083% = 117,75px
margin: 1440 * 2,083333% = 29,99999px
padding: 1440 * 1.5625% = 22,5px
Таким же образом можно рассчитать размеры на все ширины макетов
сетка на 1024px и 768px сетка на 320px
Как мы видим, наша сетка сохранилась. Она просто уменьшилась относительно ширины макета, ширины канваса.
Из всего этого следует, что для резиновой вёрстки нам достаточно всего лишь получить процентные размеры. При этом нам не нужно брать калькулятор и считать эти коэффициенты. Эту работу мы переложим на браузер.
Код для резиновой верстки
Эти стили дают возможность сделать так, чтоб по нажатию на определённую клавишу на body добавился класс .is-grid и отобразилась данная сетка. Это позволяет не тратить время на pixelperfect, и в то же время в процессе вёрстки следить, чтобы блоки располагались правильно по сетке.
Ширину колонки $grid_width и отступ между колонками $grid_gutter будем считать не относительно общей ширины 1920px, а за минусом отступов слева и справа $grid_margin:
В стилях у сетки отрезаем слева и справа margin:
С помощью градиента зацикливаем отрисовку колонок:
Обратите внимание, значение отступа слева и справа у .wrapper будет правильным на всех разрешениях, нам не нужно писать дополнительные media queries и переопределять это значение. Это огромная экономия времени.
Добавим декоративные стили для .column-item:
Сделаем ширину .column-item равной пяти колонкам. Это можно сделать несколькими способами:
1. Просто измерить ширину 5ти колонок с отступами в макете. Либо сложить ширину колонок руками:
5 колонок * 157px + 4 отступа * 30px = 905px.
(не забываем, что 1920px минус 2 отступа справа и слева по 30px = 1840px).
2. То же самое на чистом CSS:
3. Можно сосчитать 905 / 1840 на калькуляторе (так лучше не писать):
4. Либо, если использовать наши переменные:
Результат всех этих вариантов будет одинаковый:
Подключаем mixin mq, или ошибка брейкпоинтов через переменные
Часто Frontend-разработчики используют в качестве брейкпоинтов глобальные переменные в препроцессоре. Например, основные разрешения: 1920px, 1440px, 1024px, 768px и т.д. Но это загоняет разработчика в очень узкие рамки. Бывает, что возникают ситуации, когда у нас есть промежуточное разрешение: например, 905px. На нём часто не влезает текст, например, слишком длинное слово.
Самое быстрое решение — уменьшить размер текста. Если для этих нестандартных точек заводить дополнительные переменные, то это плохой путь. Этих переменных может быть очень много. В том числе, поэтому мы не используем bootstrap.
Мы хотим себе оставить свободу использовать разные значения брейк поинтов. Для этого мы используем миксин mq(), который выглядит следующим образом:
Миксин принимает 2 параметра. Второй — опциональный. Если передаётся только один параметр, то используется подход desktop first, если 2, то mobile first.
Добавим к предыдущему примеру mixin mq и брейкпоинт 768px.
При ширине экрана менее 767px ширина .column-item станет равна 4м колонкам + 5px.
Слайдер с динамической высотой
Измените ширину экрана, и увидите, как фотографии по разному вписываются в нашу сетку. В комментариях указаны подсказки, откуда берутся ширины, которые мы используем. Обратите внимание, что эти стили позволяют нам сохранять правильные пропорции фотографий на всех размерах экрана:
Разрешение экрана более 1280px Разрешение экрана менее 1280px Разрешение экрана менее 768px
Два блока в резиновой сетке
Продемонстрируем три варианта вёрстки для размещения двух блоков в сетке. Результат будет одинаковый:
Разрешение экрана более 1024px Разрешение экрана менее 1024px
При разрешении менее 768px padding у блоков сделаем резиновым
с помощью padding: percentage(20 / (320 — 7 * 2));
Grid в принципе позволяет писать меньше кода. Также следует отметить, что в данном случае мы можем использовать резиновый padding у блоков на всех разрешениях экрана, потому что grid делает расчёт процентов для padding от ширины ячейки, а не от всего контейнера, как в предыдущем способе.
Но, в таком случае на очень больших разрешениях экрана padding будет больше, чем на макете. Мы у себя в компании решили, что это нормально, что это добавляет живости макету. Конечно же, такие правки необходимо согласовывать.
Растягиваются колонки на всю ширину за счёт flex-basis, переносятся на следующую строку за счёт flex-wrap. В данном случае мы все расчёты переносим на сторону браузера.
В заключение, хочется написать список основных постулатов, которые позволят делать резиновую вёрстку быстро, качественно и надёжно:
Как можно больше использовать проценты.
Как можно больше использовать формулы автоматического рассчёта размеров.
Как можно больше использовать коэффициенты.
Как можно больше использовать grid.
Искать способы написания меньшего количества стилей, для того, чтобы переложить работу для рассчёта размеров на браузер.
Для корректного отображения всех изображений использовать cover или contain.
В данной статье поговорим о создании сеток в HTML. Разберём сетку в Twitter Bootstrap и приведём популярные решения для трёх случаев:
- old way — старый стиль, работающий во всех популярных браузерах;
- new way — современный стиль, работающий во всех современных браузерах (IE > 9) (twitter bootstrap 4);
- feature way — божественный стиль (будущий), работающий в прогрессивных браузерах.
Создание сеток одна из самых частых задач в CSS. Сначала их делали с помощью таблиц, но в дальнейшем появились более гибкие решения.
Одна из самых популярных реализаций колонок была представлена в Twitter Bootstrap 3.
Принцип работы в следующем:
- Создаём родителя (row), для которого задаём отрицательные отступы margin слева и справа. (Это необходимо, чтобы колонки располагались по центру без необходимости указывать дополнительные классы первому и последнему элементам, чтобы выровнять колонки);
- Так как колонки будут располагаться с помощью плавающего свойства float, к родителю применяется утилита clearfix, которая позволит нормализовать высоту родителя и устранит нежелательные сайд эффекты;
- Все дочерние элементы (.col) родителя получают положительные отступы слева и справа с помощью padding. Для позиционирования также устанавливается свойство float: left ;
- Считается, что в сетке не может быть более 12 колонок, поэтому базовая ширина колонки равна 1/12, в пересчёте на проценты ~8.33% . Соответственно, если колонка занимает размеры двух одинарных колонок, ширина будет 2/12, и так далее;
- Для того, чтобы колонки не проваливались друг в друга в случае, если одна колонка не имеет “видимого” содержимого, каждая колонка получает свойство min-height: 1px .
Создадим следующую HTML структуру со следующими стилями:
Сначала мы объявили константы:
- old-columns — количество колонок
- old-gutter — расстояние между колонками
Для родителя задали отступы слева и справа, а также добавили clearfix :
Для колонок добавили отступы и базовые стили, общие для всех:
Для примера, мы используем селекторы атрибутов ([class^=’old-column-’]), но в продакшене, старайтесь их изберать.
Саму сетку создали средствами SCSS:
Которая в итоге сгенерирует набор классов с постфиксами от 1 до 12:
Откроем в браузере:
Для добавления адаптивности, необходимо добавить точки остановок (breakpoints)для нужных размеров, а также задать соответствующие суффиксы классам колонок:
Как видно, для задания размеров мы использовали коллекции (map) в SCSS и с помощью цикла обошли все размеры и сгенерировали нужные классы с нужными суффиксами. Подробнее о работе map’ов в документации SASS.
В результате получим:
На gif’ке видно, как колонки изменяются в зависимости от ширины экрана.
Полную реализацию колонок, вы можете посмотреть в исходниках Twitter Bootstrap 3 в репозитории.
Преимущества:
Недостатки:
- Невозможность лаконичной реализации дополнительной возможности — одинаковая высота колонок.
Как и ранее (в предыдущей статье — CSS решения. Фиксированный блок плюс адаптивный блок) лучшим решением является использование микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.
Более прогрессивным способ для создания колонок является использование flex .
Принцип работы заключается в следующем:
- Создаём родительский блок (.row) для которого указываем свойство display: flex . Так как колонки выстраиваются в линию и могут занимать больше 100%, для этого ставиться свойство flex-wrap: wrap ;
- Для создания корректных отступов задаём отрицательные margin-left и margin-right ;
- Для всех потомков первого уровня задаем свойства position: relative , которое гарантирует корректную обработку, width: 100% что позволит нормализовать свойства всех потомков и уравнять их права на доступную им ширину, а также отступы слева и справа с помощью padding ;
- Также создаются разные классы колонок (.col-1, .col-2, …), которые принимают соответствующие размеры в пропорции 1 к 12. В отличии от предыдущего решения, регулирование ширины колонок осуществляется с помощью свойств flex и max -width .
Создадим следующую структуру HTML и классы, описанные выше:
Как можно увидеть из реализации, решение почти совпадает с old-way.
Откроем в браузере:
Так как решение уже учитывает адаптивность изменим ширину браузера и посмотрим на результат:
Ознакомиться с полным решением можно в репозитории Twitter Bootstrap.
Добавим немного контента в колонки, чтобы посмотреть, что будет с высотой колонок:
Как видно из скриншота, все колонки получили высоту самой большой колонки.
Преимущества:
- Работает во всех современных браузерах (IE > 9)
- Колонки одинаковой высоты из «коробки»
Недостатки:
Последним решением является создание сеток средствами W3C — использование display: grid .
Принцип работы в следующем:
- Создаётся родительский блок, который будет сразу определять размеры и количество колонок. Блок получает свойство display: grid .
- Для задание строк используется свойство grid-template-rows , которое принимает доступные размеры строк. Например: 1fr — создаст сетку с 1 строкой; 1fr 2fr 1fr — создаст сетку с 3 строками, где средняя строка будет занимать 50% всей доступной высоты
- Для задания столбцов используется свойство grid-template-columns , которое принимает доступные размеры столбцов (аналогично grid-template-rows ).
Создадим сетку подобную тем, что приводились в примерах ранее:
Откроем в браузере:
На скриншоте видим, что отрицательных отступов нету и колонки занимают все доступное расстояние.
Так как мы использовали единицы гибкости (fr), колонки получаются одинаковой высоты.
Если изменим ширину:
Стоит отметить, что принципы создания сеток отличаются от модели сеток используемых в Twitter Bootstrap, которые приводились ранее. В данном случае блок, который объявляет сетку уже заранее знает все свои свойства, поэтому дополнительно указывать классы не нужно.
Преимущества:
Недостатки:
- Не работает в старых браузерах;
- Требует перестройки мышления по построению и использованию сеток.
Дополнение
Небольшая демонстрация работы всех трёх решений:
В данной статье рассмотрели основные решения, используемые для создания сеток.
Разбираем, как можно расположить текст и фото в CSS Grid.
Продолжаем сагу о сетках в CSS. Что мы уже знаем:
- Сетка (grid) — это один из современных приёмов вёрстки в CSS.
- Сетку можно поделить на строки и столбцы и задать им любой размер.
- Можно выделить любую область ячеек, объединить их в один класс и управлять ими как одним целым.
- Элементами сетки может быть что угодно — текст, фото, видео или любой другой HTML-блок.
- Сетку можно сделать адаптивной, чтобы страница хорошо смотрелась на экранах любого размера.
Теперь поговорим о том, как размещать контент в ячейках сетки и что для этого нужно. Используем для этого сетку 4 × 4 — каждая ячейка пусть будет по 150 пикселей в высоту и ширину.
Заполнение блоков по очереди
Самый простой способ добавить что-то в сетку — прописать в блоке , что нам нужно. Например, можем заполнить часть нашей сетки текстом, а часть — картинками:
Чтобы картинки у нас подгонялись точно под размер сетки, мы использовали свойство 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 ячейки подряд — получится шапка сайта:
.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;
>
Сетка — это универсальный инструмент
В ней можно заверстать что угодно:
- текст в несколько колонок;
- галерею с картинками;
- картинки с поясняющим текстом;
- видео вперемешку с текстом;
- рекламные баннеры;
- полноценный сайт с шапкой, подвалом и боковым меню;
- что угодно ещё.
В финальной статье про сетку мы покажем, как с её помощью можно сделать свой полноценный сайт-портфолио — с навигацией, разделами и красивыми фотографиями.
Читайте также: