Как grid разбить на равные колонки

Обновлено: 19.05.2024

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

Все это доступно в всего лишь одной строке CSS – мне это напоминает, как Дамблдор взмахнул своей палочкой дома у Горация и «мебель вернулась на свои места, украшения взмахнули в воздух, подушки набились перьями, рваные книги сами себя отреставрировали и приземлились на полки…».

Такое магическое поведение без подключения адаптивности достигается через функцию repeat() и ключевые слова автоподстановки.

В общем, функция repeat() позволяет повторять колонки сколько угодно раз. Например, если вам нужна 12-ти колоночная сетка, можно написать так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

1fr – эта запись говорит браузеру растянуть пространство между колонок равномерно. То есть мы получаем жидкие и равные по ширине колонки. В таком случае сетка всегда будет растягиваться на 12 колонок, несмотря на ширину. Как вы догадались, это нехорошо. На маленьких экранах контент может сильно сжаться.

Поэтому необходимо задать минимальную ширину колонок, чтобы они не стали очень узкими. Для этого нам понадобится функция minmax().

grid - template - columns : repeat ( 12 , minmax ( 250px , 1fr ) ) ;

Но тогда в CSS Grid переполнится строка. Колонки не переедут на новые строки, если ширина вьюпорта недостаточна, чтобы вместить все колонки с новой минимальной шириной. Мы же сказали браузеру повторять колонки 12 раз в строке.

Чтобы колонки переносились можно использовать auto-fit или auto-fill.

grid - template - columns : repeat ( auto - fit , minmax ( 250px , 1fr ) ) ;

Эти ключевые слова говорят браузеру перенести элемент на новую строку, если не хватает ширины, чтобы его вместить без перекрытия. Используемые нами единицы измерения также гарантируют, что в случае, если ширина допускает догрузку столбца, но не полный столбец, то это пространство будет распределено по столбцу или столбцам, которые уже вместились, чтобы на конце строки не оставалось пустого пространства. Исходя из названий, сначала может показаться, что auto-fill и auto-fit противоположны. Но по факту разница в них незначительна.

С auto-fit вы можете получит в конце строки пустое пространство. Но когда и как? Давайте узнаем.

Fill или fit? В чем разница?

На недавнем семинаре по CSS я говорил про разницу auto-fill и auto-fit:

«auto-fill ЗАПОЛНЯЕТ строку максимально возможным числом колонок. Если в строку можно вместить новую колонку, она будет создана с четко заданной шириной, потому что это ключевое слово пытается ЗАПОЛНИТЬ строку максимальным числом колонок. Новые колонки могут быть пустыми, но они все же будут занимать место в строке.

auto-fit ПОДСТРАИВАЕТ доступные на данный момент колонки под пространство, расширяя их, чтобы они могли занять все доступное пространство. Браузер сначала заполняет свободное пространство дополнительными колонками (как auto-fill), после чего пустые колонки сжимаются.»

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

Разберем демо ниже.

Колонки заданы через функцию repeat() и имеют минимальную ширину 100px, максимальная ширина 1fr. Колонки будут равномерно расширяться на любое свободное пространство. Для колонок в строке мы будем использовать ключевые слова автоподстановки, и браузер сам позаботиться об адаптивности сетки и переносе колонок на новые строки при необходимости.

Браузер разместит колонки и задаст им размер в первом примере с помощью auto-fill, после чего будет применен auto-fit.

Архитектура CSS Grid

Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.

Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).

К слову, если вас интересует Флекс, вот соответствующая статья.

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.

Компьютер

Телефон

Сокращения для свойств CSS Grid

place-content
place-items
place-self
grid-template
gap / grid-gap

place-content

Данное свойство является сокращением для:

place-items

Данное свойство является сокращением для:

place-self

Данное свойство является сокращением для:

grid-template

Данное свойство является сокращением для:

grid-template-rows
grid-template-columns

gap/grid-gap

Данное свойство является сокращением для:

Погодите-ка

Давайте разберемся с отношениями между родительским и дочерними элементами.

Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .

Использование авторазмещения на сетке

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

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

Свойства грид-контейнера

Начнем со свойств родительского элемента.

grid-template-columns

Данное свойство используется для определения количества и ширины колонок. При этом, можно определять как свойства для каждой колонки в отдельности, так и устанавливать ширину всех колонок с помощью функции repeat() .

Добавим строку в style.css :

значения в пикселях будут точными. Ключевое слово auto означает заполнение элементом всего доступного пространства
использование единицы fr (фракция) в repeat() означает, что все контейнеры будут иметь одинаковую ширину

grid-template-rows

Данное свойство используется для определения количества и высоты строк. При этом, можно определять как высоту каждой колонки в отдельности, так и устанавливать высоту всех строк с помощью функции repeat() .

Изменим строку в style.css :

grid-template-areas

Данное свойство используется для определения количества пространства, занимаемого ячейкой Грида (grid cell), в терминах колонок и строк, в родительском контейнере.

Это можно считать схемой макета:

Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:

grid-template-areas : родительское свойство, создающее схему
grid-area : дочернее свойство, которое использует схему

Создаем схему

Применяем схему

Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.

column-gap

Данное свойство используется для добавления отступа между колонками.

Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .

row-gap

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

Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .

justify-items

Данное свойство используется для позиционирования грид-элементов внутри грид-контейнера вдоль главной оси. Оно принимает 4 возможных значения:

Добавим еще один контейнер в HTML :

И немного изменим CSS :

align-items

Данное свойство используется для позиционирования грид-элементов внутри грид-контейера вдоль поперечной оси. Оно принимает 4 возможных значения:

justify-content

Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль основной оси. Оно принимает 7 возможных значений:

align-content

Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль поперечной оси. Оно принимает 7 возможных значений:

Заключение

Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.

VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.

Понимание CSS Grid (1 часть): Grid-контейнер

Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.

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

В этой статье мы рассмотрим:

Создание grid-контейнера с помощью display: grid или display: inline-grid
Создание колонок и строк с помощью grid-template-columns и grid-template-rows
Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows

Статьи из данной серии:

Примечание от переводчика
В интернете очень много как статей, так и руководств о технологии CSS Grid. Но порой в материалах Rachel Andrew доступно освещаются те моменты, которым в других руководствах уделяется недостаточно внимания.

Следовательно, данную статью стоит воспринимать лишь как ещё одну точку зрения на уже хорошо известную технологию

Колонки и строки

Чтобы получить что-то похожее на сетку, нужно добавить колонки и строки. Они создаются с помощью свойств grid-template-columns и grid-template-rows . Эти свойства определяются в спецификации как принимающие значение, называемое "track-list" (список треков).

Эти свойства позволяют задать треки сетки с помощью имён линий и функций размера, разделённых пробелами. Свойство grid-template-columns позволяет задать колоночные треки, а свойство grid-template-rows – строковые.

Вот некоторые допустимые значения списка треков:

grid-template-columns: 100px 100px 200px – создаёт трёхколоночную сетку. Первая колонка равняется 100px, вторая – 100px, третья – 200px
grid-template-columns: min-content max-content fit-content(10em) – создаёт трёхколоночную сетку. Первая колонка имеет размер min-content , вторая – max-content . третья колонка имеет ширину max-content , если содержимое не превышает 10em, если превышает – ограничивается шириной 10em.
grid-template-columns: 1fr 1fr 1fr – создаёт трёхколоночную сетку, используя единицу измерения fr . Доступное пространство grid-контейнера распределяется между тремя колонками.
grid-template-columns: repeat(2, 10em 1fr) – создаёт четырёхколоночную сетку с размерами колонок 10em 1fr 10em 1fr, так как используется оператор repeat() с двумя повторениями шаблона колонок.
grid-template-columns: repeat(auto-fill, 200px) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, оставляя в конце пробел, если осталось немного дополнительного места.
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, после чего распределяет оставшееся пространство между этими созданными колонками.
grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end] – создаёт трёхколоночную сетку. Первая и третья колонки имеют ширину, равную 1 части доступного пространства, а третья – 3 частям. Линии именуются путём добавления названий линий в квадратных скобках.

Как вы можете видеть, существует множество способов указать набор треков сетки. Давайте посмотрим, как именно это всё работает, а также узнаем, в какой ситуации лучше использовать каждый из способов.

Единицы длины

Для создания треков можно использовать любые единицы измерения длины или проценты. Если сумма ширин треков меньше доступной в grid-контейнере, по умолчанию треки выстраиваются в начале контейнера, а в конце остаётся свободное место. Это происходит из-за того, что по умолчанию свойства align-content и justify-content имеют значение start . Вы можете разметить треки сетки или переместить их в конец контейнера, используя свойства выравнивания, про которые я подробно рассказывала в статье How To Align Things In CSS.

Также можно использовать ключевые слова min-content , max-content и fit-content() .

Использование min-content даст вам трек, который будет настолько маленьким, насколько это возможно, при этом не вызывая переполнение содержимым. Следовательно, при его использовании в качестве размера колонки, содержимое будет мягко переноситься в тех местах, где это возможно. Трек обретает ширину, равную самому длинному слову в колонке или наибольшему элементу фиксированного размера.

Использование max-content приведёт к тому, что содержимое вообще не будет переноситься, что может привести к переполнению.

Ключевое слово fit-content может быть использовано только вместе с передаваемым значением. Это значение становится максимумом, до которого может растягиваться данный трек. Следовательно, трек будет вести себя как при использовании max-content , растягивая содержимое, пока ширина не достигнет максимального значения, которое мы указали. А когда это произойдёт, содержимое начнёт переноситься как обычно. Таким образом, трек может быть меньше переданного значения, но никогда не будет больше него.

Узнать больше о размерах в CSS Grid и других технологиях разметки можно в моей статье How Big Is That Box? Understanding Sizing In CSS Layout.

Если в итоге у вас получились треки, которые занимают больше пространства, чем доступно в контейнере, они будут переполнять контейнер. Если используются проценты, то как и в основанной на процентах float или flex разметке, нужно будет внимательно следить за тем, чтобы сумма процентов не превышала 100, если вы хотите избежать переполнения.

Единицы измерения «fr»

CSS Grid включает метод, который может помочь сэкономить время на расчет процентов, этот метод предполагает задание ширины треков с помощью единиц измерения fr . Это не единицы длины и поэтому не могут использоваться в функции cacl() ; это гибкая единица измерения, которая рассчитывается исходя из количества доступного пространства в grid-контейнере.

Это значит, что задав список треков 1fr 1fr 1fr , доступное пространство делится на 3 и распределяется поровну между тремя колонками. Если же указать список треков 2fr 1fr 1fr , доступное пространство делится на 4, из которых 2 части отходят первой колонке, и по одной части для второй и третьей колонки.

Важно помнить о том, что по умолчанию "доступное пространство" – это не всё пространство контейнера. Если какая-то из колонок содержит элемент фиксированного размера или длинное слово, которое не может быть перенесено на новую строку, пространство под эту колонку будет выделено до того, как начнётся его распределение между всеми колонками.

В следующем примере я удалила пробелы между словами в элементе ItemThree . Из-за этого образовалась длинная непереносимая строка, поэтому распределение доступного пространства происходит только после отрисовки данного элемента.

Вы можете объединять единицы измерения fr с фиксированными размерами. Например, компонент может состоять из двух колонок с фиксированной шириной по краям и гибкой центральной областью.

Еще один пример – компонент с двумя колонками, одна из которых имеет ширину fit-content(300px) , а другая 1fr . Это полезно в ситуации, когда в первой колонке может содержаться что-то меньшее 300px, и в этом случае эта колонка займёт ровно столько пространства, сколько ей потребуется, а вторая колонка с шириной, заданной в fr займёт всё оставшееся пространство. Если же добавить что-то большее (например, изображение со свойством max-width: 100% ), первая колонка увеличится до 300px, а вторая колонка займёт остальное пространство. Использование fr совместно со свойством fit-content – это способ создавать очень гибкие компоненты сайта.

Функция repeat()

Функция repeat() при указании списка треков может избавить от необходимости снова и снова вводить одинаковые значения.

При использовании функции repeat() , значение перед запятой задаёт количество повторений для списка треков, идущих после запятой. Этот список треков может содержать множество значений.В итоге, вы можете задавать таким образом повторение определённого набора треков.

Функцию repeat() можно использовать лишь для части треков из всего набора. Например, следующая строка задает одну колонку шириной 1fr, затем три колонки по 200px и в конце еще одну шириной 1fr.

Помимо числа перед запятой, позволяющего указывать точное количество повторений шаблона, также можно использовать ключевые слова auto-fill или auto-fit . Использование одного из этих ключевых слов подразумевает, что вместо заранее определённого, ваш grid-контейнер будет заполнен таким количеством треков, сколько в него поместится.

Использование фиксированных единиц измерения длины означает, что если размер контейнера больше суммы размеров колонок, в конце будет оставаться свободное пространство. В примере выше ширина контейнера равна 500px, поэтому получается две колонки по 200px плюс свободное место в конце.

Мы также можем использовать другую grid-функцию, чтобы сделать значение минимальным, а свободное пространство чтобы распределялось между всеми колонками. Функция minmax() принимает значения минимального и максимального размера. Если задать минимум = 200px, а максимум = 1fr, мы получим столько колонок шириной 200px, сколько поместится, а благодаря значению максимума = 1fr, если осталось дополнительное пространство, оно равномерно распределится между всеми колонками.

Я упоминала два ключевых слова: auto-fill и auto-fit . Если у вас достаточно содержимого, чтобы заполнить весь первый ряд ячеек контейнера, поведение этих ключевых слова будет одинаковым. Если содержимого не хватает – поведение будет разным.

Значение auto-fill сохраняет размер колонки, даже если в ней нет содержимого.

При использовании значения auto-fit , пустые колонки схлопываются.

С помощью Firefox Grid Inspector вы можете увидеть, что колонки всё ещё здесь, но были схлопнуты, уменьшив свою ширину до 0px. Последняя линия нашей сетки – это линия 3, поскольку мы всё ещё можем поместить дополнительные два трека.

Именованные линии

В последнем примере допустимых значений для указания списка треков использовался подход с именованием линий. При использовании CSS Grid, всегда есть возможность работать с линиями через их номера. Однако, их также можно именовать. Названия линиям задаются внутри квадратных скобок. Допускается задавать несколько названий для одной линии, разделяя их пробелом. Например, в следующем списке треков всем линиям заданы два названия.

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

Примечание: В следующей статье из этой серии я больше расскажу о позиционировании с использованием линий и о том, как их лучше именовать. А пока что можете почитать мою статью "Naming Things in CSS Grid Layout, чтобы лучше понять эту тему.

Создание Grid-контейнера

Grid, как и Flexbox, является значением свойства display . Следовательно, чтобы сообщить браузеру, что вы хотите использовать grid-разметку, нужно использовать display: grid . Элемент, к которому применено это свойство, станет блочным, а все его дочерние элементы станут принимать участие в контексте форматирования Grid. Это значит, что они ведут себя как grid-элементы, а не как обычные блочные или строчные.

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

Разница будет видна, если присутствует какой-то текст, не обернутый в теги и расположенный непосредственно внутри grid-контейнера, поскольку этот текст будет оформлен в анонимный элемент и станет grid-элементом. Любой элемент, который обычно является строчным, таким как , также станет элементом сетки, как только родительский станет grid-контейнером.

На примере ниже имеется два блочных элемента плюс строка с тегом в середине текста. Мы получаем пять grid-элементов:

Два элемента <div>
Строка текста перед
Элемент тега
Строка текста после

Если вы проверите сетку в Firefox Grid Inspector, сможете увидеть пять строковых треков, созданных для каждого элемента.

Также можно создать строчную сетку, задав display: inline-grid ; в этом случае ваш grid-контейнер станет строчным блоком. Однако, его дети всё ещё будут элементами сетки и будут вести себя так же, как элементы внутри блочного grid-контейнера. Свойство display определяет лишь внешний контекст форматирования для сетки. Именно поэтому grid-контейнер в данном случае ведёт себя точно так же, как указано выше, даже если находится рядом с другими блоками страницы.

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

Примечание: В будущем мы сможем лучше описывать разметку макета, используя display: block grid , чтобы создать блочный контейнер и display: inline grid для строчного. Почитать подробнее про это изменение в спецификации свойства display можно в моей статье "Digging Into The DIsplay Property: The Two Values Of Display".

Свойства грид-элементов

Шкала CSS Grid

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

На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:

При использовании функции repeat() мы может установить одинаковую ширину/высоту для колонок/строк. Пример с колонками:

Это аналогично следующему:

Небольшая заметка

При использовании единицы измерения fr , доступное пространство делится на равные части.

В данном случае доступное пространство делится на 4 равные части.

grid-columns: start/end

Данное свойство позволяет объединять колонки. Оно является сокращением для:

Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.

Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:

Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.

Каждый класс .box-* по умолчанию имеет такой масштаб (scale):

Это можно переписать с помощью ключевого слова span :

Давайте "присвоим" 8 фракций .box-1 :

Небольшая заметка

Как мы производим вычисления? box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.

Как использовать ключевое слово span

Считается, что использование span делает код более читаемым.

В этом случае нам просто нужно добавить к box-1 8 частей:

Это даст такой же результат.

grid-row: start/end

Данное свойство позволяет объединять строки. Оно является сокращением для:

Теперь сосредоточимся на строках:

Давайте добавим к box-1 9 частей:

Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.

Вот вариант со span :

grid-area

Сначала нам нужно настроить grid-temlate-areas , о чем мы говорили выше. После этого в дочерних классах определяются названия областей, которые используются в родительском классе:

Определяем grid-template-areas в родительском классе:

Затем определяем grid-area в дочерних классах:

justify-self

Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:

align-self

Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:

Архитектура CSS Grid

К слову, если вас интересует Флекс, вот соответствующая статья.

Свойства грид-контейнера

Начнем со свойств родительского элемента.

grid-template-columns

Добавим строку в style.css :

значения в пикселях будут точными. Ключевое слово auto означает заполнение элементом всего доступного пространства
использование единицы fr (фракция) в repeat() означает, что все контейнеры будут иметь одинаковую ширину

grid-template-rows

Изменим строку в style.css :

grid-template-areas

Это можно считать схемой макета:

Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:

grid-template-areas : родительское свойство, создающее схему
grid-area : дочернее свойство, которое использует схему

Создаем схему

Применяем схему

Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.

column-gap

Данное свойство используется для добавления отступа между колонками.

Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .

row-gap

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

Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .

justify-items

Добавим еще один контейнер в HTML :

И немного изменим CSS :

align-items

justify-content

align-content

Погодите-ка

Давайте разберемся с отношениями между родительским и дочерними элементами.

Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .

Полное визуальное руководство/шпаргалка по CSS Grid

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Настройка проекта

Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:

Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
Создаем файлы index.html и style.css
Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

Создаем 3 контейнера внутри body :

Шаг 1

Шаг 2

Немного стилизуем body :

Шаг 3

Стилизуем все контейнеры:

Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.

Шаг 4

Добавим небольшой отступ между контейнерами:

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

родительские (свойства грид-контейнера) и
дочерние (свойства грид-элементов)

Обратите внимание: красным цветом отмечены сокращения для свойств:

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

Свойства грид-элементов

Шкала CSS Grid

На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:

Это аналогично следующему:

Небольшая заметка

При использовании единицы измерения fr , доступное пространство делится на равные части.

В данном случае доступное пространство делится на 4 равные части.

grid-columns: start/end

Данное свойство позволяет объединять колонки. Оно является сокращением для:

Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:

Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.

Каждый класс .box-* по умолчанию имеет такой масштаб (scale):

Это можно переписать с помощью ключевого слова span :

Давайте "присвоим" 8 фракций .box-1 :

Небольшая заметка

Как использовать ключевое слово span

Считается, что использование span делает код более читаемым.

В этом случае нам просто нужно добавить к box-1 8 частей:

Это даст такой же результат.

grid-row: start/end

Данное свойство позволяет объединять строки. Оно является сокращением для:

Теперь сосредоточимся на строках:

Давайте добавим к box-1 9 частей:

Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.

Вот вариант со span :

grid-area

Определяем grid-template-areas в родительском классе:

Затем определяем grid-area в дочерних классах:

justify-self

align-self

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

Вот простой пример макета сайта, созданного с помощью Грида.

Компьютер

Телефон

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

родительские (свойства грид-контейнера) и
дочерние (свойства грид-элементов)

Обратите внимание: красным цветом отмечены сокращения для свойств:

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

Полное визуальное руководство/шпаргалка по CSS Grid

Явная и неявная сетка

При создании сетки с помощью свойств grid-template-columns и grid-template-rows задаётся так называемая явная сетка. Определённая таким образом сетка имеет размеры, равные сумме всех заданных треков.

Если же количество grid-элементов превышает заданное количество ячеек, или просто элемент размещён так, что выходит за границы созданной сетки, это создаст треки неявной сетки. Размер этих треков неявной сетки будет определён по умолчанию. Мы видели эту неявную сетку в действии, когда я объявила display: grid для родительского элемента и сетка автоматически создала по одной строке для каждого grid-элемента. Я не определяла эти строки явно, но поскольку у неё были дочерние элементы, строковые треки были созданы, чтобы разместить эти элементы на сетке.

Задать размер неявных строк и колонок можно с помощью свойств grid-auto-rows или grid-auto-columns . Эти свойства принимают список треков, поэтому если вы хотите, чтобы все неявные колонки были высотой не меньше 200px и увеличивались, если того требовало содержимое, можете можете сделать следующее:

Если же нужно, чтобы размер первой неявной строки определялся автоматически исходя из содержимого, а вторая имела фиксированную высоту 100px (и так далее, поочерёдно применяя эти значения ко всем последующим строкам), то свойству можно задать несколько значений.

Настройка проекта

Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
Создаем файлы index.html и style.css
Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

Создаем 3 контейнера внутри body :

Шаг 1

Шаг 2

Немного стилизуем body :

Шаг 3

Стилизуем все контейнеры:

Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.

Шаг 4

Добавим небольшой отступ между контейнерами:

Сокращения для свойств CSS Grid

place-content
place-items
place-self
grid-template
gap / grid-gap

place-content

Данное свойство является сокращением для:

place-items

Данное свойство является сокращением для:

place-self

Данное свойство является сокращением для:

grid-template

Данное свойство является сокращением для:

grid-template-rows
grid-template-columns

gap/grid-gap

Данное свойство является сокращением для:

Заключение

Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.

VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.

Читайте также: