Как сделать сетку в css

Как сделать — сетку с тремя столбцами

Узнайте, как создать сетку макета с тремя столбцами с помощью CSS.

Column 1

Column 2

Column 3

Создание макета трех столбцов

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

В этом примере мы создадим три равные колонки:

Пример

/* Clear floats after the columns */
.row:after <
content: "";
display: table;
clear: both;
>

В этом примере мы создадим три неравных столбца:

Пример

В этом примере мы создадим адаптивную компоновку трех столбцов:

Пример

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

Совет: Перейти на наш CSS отзывчивый веб-дизайн учебник, чтобы узнать больше о отзывчивый веб-дизайна и сеток.

Как сделать — сетку для адаптивного изображения

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

Создание сетки изображений

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Используйте CSS Flexbox для создания адаптивного макета:

Пример

.row <
display: flex;
flex-wrap: wrap;
padding: 0 4px;
>

/* Create four equal columns that sits next to each other */
.column <
flex: 25%;
max-width: 25%;
padding: 0 4px;
>

.column img <
margin-top: 8px;
vertical-align: middle;
>

/* Responsive layout — makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) <
.column <
flex: 50%;
max-width: 50%;
>
>

/* Responsive layout — makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) <
.column <
flex: 100%;
max-width: 100%;
>
>

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

Совет: Перейдите на наш CSS Flexbox учебник, чтобы узнать больше о гибкий модуль макета коробки.

Создаём CSS-сетку нужного размера

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

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

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

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

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

  1. Создадим общий класс, который будет отвечать за сетку целиком. Пока не будем делать разбивку на строки и столбцы.
  2. В нём сделаем видимые внешние границы — так мы поймём, какого размера сетка у нас получается.
  3. Каждую ячейку закрасим светло-оранжевым цветом, чтобы видеть, где заканчивается одна ячейка и начинается другая.
  4. Добавим в оформление ячеек отступы и скругления для красоты.
  5. После этого в теле страницы создадим новый блок и применим к нему наш стиль с сеткой.
  6. Добавим 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, который должен был растянуть вторую строку на всё свободное место, не работает. Но с ним всё в порядке, ошибки тут нет, смотрите, что произошло на самом деле:

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

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

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

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

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

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

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

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

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

Что дальше

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *