Как растянуть grid на всю высоту
Обновлено: 02.07.2024
У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых раньше мы могли только мечтать. В прошлый раз мы говорили о CSS-сетке Grid. Сегодня мы её будем настраивать.
- В CSS есть много способов расставить объекты на странице: по абсолютным координатам, относительно друг друга, закрепив в каком-то месте страницы и т. д.
- Один из полезных для веб-разработчика способов — разделить страницу на столбцы и строки, как будто это таблица или сетка. И внутри этой сетки расставить объекты.
- Инструмент Grid как раз помогает нарисовать на странице воображаемую сетку и выравнивать объекты по ней.
- Grid достаточно гибкий, чтобы учесть меняющуюся ширину экрана и предсказуемо управлять столбцами и строками.
Сегодня поработаем с размером ячеек сетки, чтобы в следующий раз собрать из них что-то действительно полезное.
Формируем строки и столбцы
Давайте посмотрим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.
Сделаем в сетке три колонки по 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);
Что дальше
Статья получилась большой, поэтому про работу с ячейками и областями сетки поговорим в другой раз. А потом сверстаем на сетке полноценную страницу-портфолио.
Как управлять отдельной ячейкой
Ячейка — это самая маленькая доступная область в сетке. Для этого нужно создать новую область, куда будет входить только эта ячейка, например, так:
.oblast-3 grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
>
Заполнение блоков по очереди
Самый простой способ добавить что-то в сетку — прописать в блоке <div>, что нам нужно. Например, можем заполнить часть нашей сетки текстом, а часть — картинками:
Чтобы картинки у нас подгонялись точно под размер сетки, мы использовали свойство object-fit: cover — оно увеличивает или уменьшает размер картинки так, чтобы она подгонялась под нужное место.
Ещё мы добавили отдельный стиль для абзацев с текстом и сделали в нём отступы слева и справа, чтобы текст не прилипал к границам ячеек. Там, где мы не использовали тег <p> (элементы 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;
>
заставить контейнер css grid заполнить весь экран устройства
Если вы воспользуетесь width: 100vw; и height: 100vh; , объект с этими стилями будет растянут на всю ширину и высоту устройства.
Также обратите внимание, что время от времени может быть добавлено дополнение, и поля могут быть добавлены в ваш просмотр браузерами и т.п. Я добавил * глобальный без отступов и полей, чтобы вы могли увидеть разницу. Имейте это в виду.
Вы можете добавить position: fixed; с атрибутом top left right bottom 0 , это решение работает и в старых браузерах.
Если вы хотите встроить его, добавьте position: absolute; в оболочку и position: relative в div вне оболочки.
Два важных свойства CSS, которые нужно установить для страниц полной высоты:
Позвольте телу расти так высоко, как того требует его содержание.
Заставьте тело не становиться меньше, чем высота окна.
То, что вы делаете со своей птицей, не имеет значения, если вы используете дроби или проценты, вы должны быть в безопасности во всех случаях.
Если вы хотите, чтобы .wrapper был полноэкранным, просто добавьте следующее в класс-оболочку:
2 ответа
Ваш код работает отлично, как написано.
Ваш элемент сетки изображений установлен на height: 400px .
Затем у вас есть 50 пикселей в верхнем и нижнем отступах.
Таким образом, элемент сетки изображения имеет высоту 500 пикселей в строке, установленной на 1fr , в сетке из трех строк. Все работает отлично, как указано.
Возможно, вам нужны четыре строки:
Я не уверен, что это то, о чем вы спрашиваете, но, похоже, это подходит: изменить
CSS Grid - автоматическая высота столбца
cart form растягивается по вертикали, а thumbs располагаются в нижнем левом углу, когда я хочу, чтобы они располагались прямо под тележкой, вот так:
Готовим шаблон
Начнём с пустого шаблона. Чтобы было наглядно видно, как в сетке располагаются ячейки, сделаем так:
- Создадим общий класс, который будет отвечать за сетку целиком. Пока не будем делать разбивку на строки и столбцы.
- В нём сделаем видимые внешние границы — так мы поймём, какого размера сетка у нас получается.
- Каждую ячейку закрасим светло-оранжевым цветом, чтобы видеть, где заканчивается одна ячейка и начинается другая.
- Добавим в оформление ячеек отступы и скругления для красоты.
- После этого в теле страницы создадим новый блок и применим к нему наш стиль с сеткой.
- Добавим 10 новых элементов в сетку и посмотрим, что получится.
Вот что у нас получается, если у сетки не задавать никаких параметров:
- элементы располагаются друг под другом в одну колонку;
- сетка растягивается по ширине на весь экран;
- элементы тоже растягиваются по ширине;
- по высоте сетка занимает ровно столько, чтобы вместить всё содержимое. На всю высоту сетка автоматически не растягивается.
Верстаем в сетке
Разбираем, как можно расположить текст и фото в CSS Grid.
Продолжаем сагу о сетках в CSS. Что мы уже знаем:
- Сетка (grid) — это один из современных приёмов вёрстки в CSS.
- Сетку можно поделить на строки и столбцы и задать им любой размер.
- Можно выделить любую область ячеек, объединить их в один класс и управлять ими как одним целым.
- Элементами сетки может быть что угодно — текст, фото, видео или любой другой HTML-блок.
- Сетку можно сделать адаптивной, чтобы страница хорошо смотрелась на экранах любого размера.
Теперь поговорим о том, как размещать контент в ячейках сетки и что для этого нужно. Используем для этого сетку 4 × 4 — каждая ячейка пусть будет по 150 пикселей в высоту и ширину.
Сетка — это универсальный инструмент
В ней можно заверстать что угодно:
- текст в несколько колонок;
- галерею с картинками;
- картинки с поясняющим текстом;
- видео вперемешку с текстом;
- рекламные баннеры;
- полноценный сайт с шапкой, подвалом и боковым меню;
- что угодно ещё.
В финальной статье про сетку мы покажем, как с её помощью можно сделать свой полноценный сайт-портфолио — с навигацией, разделами и красивыми фотографиями.
Адаптивные размеры и автозаполнение
Теперь сделаем так:
- поставим три строки вместо пяти;
- последнюю строку растянем вниз до конца окна — используем для этого 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-команд, можно получить любой шаблон для вёрстки страницы.
Читайте также: