Создаём CSS-сетку подходящего размера

У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых ранее мы могли лишь грезить. В прошедший раз мы гласили о CSS-сетке Grid. Сейчас мы её будем настраивать.

В CSS есть много методов расставить объекты на страничке: по абсолютным координатам, относительно друг дружку, закрепив в каком-то месте странички и т. д.
Один из нужных для веб-разработчика методов — поделить страничку на столбцы и строки, как как будто это таблица либо сетка. И снутри данной сетки расставить объекты.
Инструмент Grid как раз помогает нарисовать на страничке воображаемую сетку и сглаживать объекты по ней.
Grid довольно гибкий, чтоб учитывать меняющуюся ширину экрана и прогнозируемо управлять столбцами и строчками.

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

Готовим шаблон

Начнём с пустого шаблона. Чтоб было наглядно видно, как в сетке размещаются ячейки, создадим так:

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

Вот что у нас выходит, если у сетки не задавать никаких характеристик:

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

Интересно почитать: Как настроить общий доступ к excel файлу

Формируем строки и столбцы

Давайте поглядим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.

Создадим в сетке три колонки по 150 пикселей:

grid-template-columns: 150px 150px 150px;

Сетка сходу уменьшилась по высоте, подстраиваясь под количество частей. Сейчас укажем подходящую высоту для частей:

Смотрите, высота поменялась лишь у первой строки. Другие остались той же высоты, что и ранее, поэтому что мы указали лишь один параметр в команде grid-template-rows. Создадим 5 строк одинаковой высоты:

grid-template-rows: 50px 50px 50px 50px 50px ;

Потому что мы очевидно указали, что нам в сетке необходимо 5 строк, то у нас возникла пустая 5-ая строчка. В ней пока никаких частей, но сетка уже предугадала для их свободное пространство.

Чтоб не писать 5 раз попорядку размер 50px, можно применять такую команду:

grid-template-rows: repeat(5, 50px);

Она повторяет подходящий нам размер (50 пикселей) определённое количество раз — в нашем случае это 5 раз. То же самое работает и с колонками — создадим 4 однообразные колонки используя функцию repeat():

grid-template-columns: repeat(4, 150px);

Адаптивные размеры и автозаполнение

Сейчас создадим так:

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

Запишем это в разделе со стилями:

grid-template-rows: 50px 1fr 50px;
grid-template-columns: repeat(4, 1fr);

Кажется, что 1fr, который был должен растянуть вторую строчку на всё свободное пространство, не работает. Но с ним всё в порядке, ошибки здесь нет, смотрите, что вышло по сути:

1-ая строчка получила ширину 50 пикселей.
3-я строчка тоже получила 50 пикселей.
Опосля этого браузер, смотря на 1fr, стал высчитывать, какую высоту сделать у 2-ой строки.
Браузер понимает, что 1fr должен заполнить всё оставшееся свободное пространство в сетке, но у нас нижняя граница сетки прилегает впритирку к крайней строке.
Это означает, что вольного места в сетке нет, потому браузер учёл все внутренние отступы из общих опций ячейки и сделал вторую строчку малой высоты.

Интересно почитать: Как вставить строчку между строчками в excel

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

Чтоб сетка растянулась по высоте на всё окно, употребляют относительные единицы, к примеру, vh — она показывает, сколько процентов от высоты окна будет занимать элемент. Чтоб растянуть сетку до края, напишем:

Полосы прокрутки возникли из-за того, что общий размер сетки у нас больше 100% высоты окна — к высоте добавились наружные и внутренние отступы сетки.

Если нам необходимо сделать столбцы и строки в определённых пропорциях, также используем fr — он подгонит всё под размер окна:

height: 92vh;
grid-template-columns: 1fr 2fr 2fr 1fr ;
grid-template-rows: 50px 1fr 50px;

Сейчас у нас вышел прекрасный шаблон на 12 ячеек:

верхняя и нижние строки высотой по 50 пикселей;
средняя растягивается на всю высоту;
2-ая и 3-я колонки в дважды обширнее, чем боковые.

Используя нужные размеры, автозаполнение и полезные функции из нашей выборки современных CSS-команд, можно получить хоть какой шаблон для вёрстки странички.

Что далее

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