Css grid-template-rows property

Введение

CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная
система, которая может обрабатывать как столбцы так и строки, в отличии от Flexbox, который в значительной
степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила к родительским
элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid
элементами).

Контейнер сетки

Элемент к которому применяется display: grid. Это прямой родитель для всех
элементов сетки. В этом примере grid-container является контейнером.

Элемент сетки

Дочерние элементы (прямы потомки) контейнера. На примере выше item это
элемент сетки.

Линия сетки (Grid Line)

Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными (линии колонок) или
горизонтальными (линии строк) и располагаться по обе стороны от строки или столбца. На изображении синяя
линия является примером вертикальной линии (линией колонки).

Трек сетки (Grid Track)

Пространство между двумя соседними линиями. Трек можно представить как строку (колонка) или столбец
(ряд). Вот трек между второй и третей линией строк.

Ячейка сетки (Grid Cell)

Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная единица измерения
сетки. Вот пример ячейки между линиями строк 1 и 2, линиями колонок 2 и 3.

Область сетки (Grid Area)

Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек. Вот
пример области между строками 1 и 3 и колонками 1 и 3.

Как устроен grid контейнер

Размеры содержимого сетки

При созда­нии сет­ки мож­но исполь­зо­вать раз­ные еди­ни­цы раз­мер­но­сти, сме­ши­вая их друг с дру­гом. Напри­мер, мож­но ука­зать, что в сет­ке будет три столб­ца — пер­вый шири­ной 100 пик­се­лей, вто­рой будет раз­ме­ром с поло­ви­ну шири­ны экра­на, а тре­тий пусть зани­ма­ет всё остав­ше­е­ся место:

grid-template-columns: 100px 50vw 1fr;

Пик­се­ли: ука­зы­ва­ем нуж­ный нам раз­мер или поль­зу­ем­ся функ­ци­ей minmax(), кото­рая зада­ёт мини­маль­ный и мак­си­маль­ный раз­мер дорожки.

Отно­си­тель­ные вели­чи­ны: Если шири­на или высо­та у нас зави­сят от раз­ме­ров окна бра­у­зе­ра, то мож­но исполь­зо­вать отно­си­тель­ную вели­чи­ну vh (высо­та окна) или vw (шири­на окна):

100vh — вся высо­та окна,

33vh — треть высоты,

50vw — поло­ви­на шири­ны окна браузера.

Для про­сто­ты мож­но пред­ста­вить, что чис­ла перед vh и vw — это про­цен­ты. 100 — это сто про­цен­тов, вся види­мая часть, 50 — это поло­ви­на и так далее. Мож­но ука­зать боль­ше 100, тогда содер­жи­мое уедет за гра­ни­цы окна и нуж­но будет исполь­зо­вать про­крут­ку вниз или вбок.

FR рабо­та­ет так:

• созда­ёт дорож­ки с нуж­ны­ми пропорциями;
• или раз­ре­ша­ет зани­мать одной дорож­ке всю сво­бод­ную область окна браузера.

Напри­мер: 

grid-template-columns: 1fr 1fr 1fr 1fr; — 4 колон­ки оди­на­ко­вой ширины;

grid-template-columns: 1fr 1fr 1fr 3fr; — послед­няя колон­ка будет шире осталь­ных в три раза.

Если нам нуж­но что-то рас­тя­нуть на всё сво­бод­ное место, мы можем ука­зать раз­ме­ры осталь­ных эле­мен­тов, а там, где нуж­но рас­тя­нуть, напи­шем 1fr:

grid-template-columns: 100px 1fr 100px;

Этот код сде­ла­ет нам три колон­ки — пер­вая и тре­тья шири­ной 100 пик­се­лей, а вто­рая (цен­траль­ная) зай­мёт всё осталь­ное место. Если раз­мер окна изме­нит­ся, то боко­вые колон­ки оста­нут­ся по 100 пик­се­лей, а цен­траль­ная перестроится. 

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Flexbox CSS

На смену всем известным флоатам приходит Flexbox CSS. Он не был так широко известен, несмотря на то, что появился еще в 2011 году.

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

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

В чем преимущества Flex?

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

Давайте рассмотрим пример:

В этом примере мы видим родительский блок с классом box и дочерние элементы, которые окрашены в зеленый цвет и имеют ширину/высоту 100px. Чтобы поставить их в ряд, необходимо всего лишь установить

Если нам необходимо установить блоки по центру, то мы можем установить здесь же. В случае с float, такая реализация была бы невозможна (без костылей).

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

Чтобы ознакомиться со всеми свойствами Flexbox CSS, вы можете воспользоваться наглядной интерактивной шпаргалкой по всем свойствам. Обязательно держите ее под рукой, когда будете верстать сайт.

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

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

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

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

Сет­ка сра­зу умень­ши­лась по высо­те, под­стра­и­ва­ясь под коли­че­ство эле­мен­тов. Теперь ука­жем нуж­ную высо­ту для элементов:

grid-template-rows: 50px;

Смот­ри­те, высо­та поме­ня­лась толь­ко у пер­вой стро­ки. Осталь­ные оста­лись той же высо­ты, что и рань­ше, пото­му что мы ука­за­ли толь­ко один пара­метр в коман­де 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);

Значения свойств

Значение	Описание
none	Значение по умолчанию. Нет конкретных размеров столбцов или строк
grid-template rows / grid-template-columns	Specifies the size(s) of the columns and rows
grid-template-areas	Specifies the grid layout using named items
grid-template rows / grid-auto-columns	Задает размер (высоту) строк и автоматический размер столбцов
grid-auto-rows / grid-template-columns	Задает автоматический размер строк и задает свойство столбцов сетки-шаблона
grid-template rows / grid-auto-flow grid-auto-columns	Задает размер (высоту) строк и порядок размещения автоматически размещаемых элементов, а также автоматический размер столбцов
grid-auto flow grid-auto-rows / grid-template-columns	Задает способ размещения автоматически размещаемых элементов и автоматического размера строк, а также задает свойство столбцов сетки-шаблона
initial	Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit	Наследует это свойство из родительского элемента. Read about inherit

Смешение единиц

При указании размеров рядов вы можете использовать фиксированные размеры с такими единицами как px или em. Также вы можете использовать гибкие размеры, такие как проценты или единицы fr. Тем не менее настоящее волшебство CSS Grid Layout проявляется в возможности смешивать эти единицы. Лучше всего понять как это работает можно на примере:

Здесь мы объявили сетку с тремя столбцами. Первый столбец имеет фиксированную ширину в 100px. Второй занимает 30% доступного пространства, а третий имеет ширину в 1fr, что означает, что он занимает одну часть доступного пространства. В данном случае, он займет все упомянутое пространство.

Вот наш HTML:

Результат смотрите на Codepen

Просмотрите эту сетку и измените свойство grid-template-columns на следующее:

Видите, что случилось? Вместо 3 столбцов у вас есть третий столбец в 2fr, занимающий 2/3 упомянутого пространства, и четвертый столбец, занимающий оставшуюся 1/3. Продолжайте испытывать инструменты разработчика Firefox и пробуйте различные комбинации единиц.

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

The grid-template-columns Property

The property defines the
number of columns in your grid layout, and it can define the width of each column.

The value is a space-separated-list, where each value defines the width
of the respective column.

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or «auto» if all columns should have the same width.

Make a grid with 4 columns:

.grid-container {
  display: grid; 
grid-template-columns: auto auto auto auto;}

Note: If you have more than 4 items in a 4 columns grid, the grid will automatically
add a new row to put the items in.

The property can also be used to specify the size (width) of the columns.

Создание рядов

Что, если вы захотите разбить макет на четыре части? Всё, что мы рассмотрели до сих пор про колонки, применимо и к рядам.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 250px;
}

Создание грид-раскладки при помощи и

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

Контент переполняет указанные размеры ряда

Мы создали два ряда по 250px, если контент внутри ряда переполнит его, он прорвется через границу своего ряда и начнёт перекрывать контент ряда под ним. Не совсем желаемый результат.

Это только цветочки

Мы пережили почти пятнадцать лет безраздельного господства флоатов в раскладках, успели изучить их до мелочей, a CSS Grid — еще совсем новичок, и еще так много предстоит экспериментировать и изучать.

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

Если стало интересно и появилось желание продолжить знакомство с CSS Grid, поиграйтесь с GridByExample Рэйчел Эндрю, где исследуется каждый аспект CSS Grid в демо-примерах с объяснениями.

Области шаблона

В предыдущем примере мы узнали как создавать базовый макет путем позиционирования элементов с помощью линий сетки. Другой метод позиционирования заключается в использовании именованных областей сетки со свойствами grid-template-areas и grid-area. Лучше всего показать это на примере. Давайте восстановим сетку из нашего предыдущего примера со свойством grid-template-areas:

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

Наш HTML:

Оставшаяся часть нашего CSS:

Результат на Codepen

Вы знаете, что инструменты разработчика Firefox могут показывать имена областей? Попробуйте! Просмотрите сетку из этого примера и откройте панель макета. Тут вы можете управлять функциями наложения сетки и показа названий областей.

The align-content Property

The property is used to
vertically align the whole grid inside the container.

6

Note: The grid’s total height has to be less than the container’s height for the align-content property to have any effect.

.grid-container {
  display: grid;  height: 400px; 
align-content: center;}

.grid-container {
  display: grid;  height: 400px; 
align-content: space-evenly;}

.grid-container {
  display: grid;  height: 400px; 
align-content: space-around;}

.grid-container {
  display: grid;  height: 400px; 
align-content: space-between;}

.grid-container {
  display: grid;  height: 400px; 
align-content: start;}

Значения¶

Значение по-умолчанию:

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

Задает размер строк, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.

Неотрицательное значение в «гибких» единицах измерения (fractional unit). Каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения , строки будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.

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

Значения flex не являются значениями length, по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях (функция выполняет математические расчеты для определения значений свойств).

Ключевое слово, которое задает размер каждой строки в зависимости от самого большого элемента в столбце.

Ключевое слово, которое задает размер каждой строки в зависимости от самого маленького элемента в столбце.

Функциональная нотация, определяющая диапазон размеров больше или равный и меньше или равный . Если меньше , то игнорируется, а функция обрабатывается как . Значение в «гибких» единицах измерения в качестве максимального значения задает коэффициент гибкости строки, это недопустимо для определения минимума.

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

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

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

Устанавливает свойство в значение по умолчанию.

Указывает, что значение наследуется от родительского элемента.

Единица FR (FR unit)

В нашей первой сетке мы создали столбцы с фиксированной шириной. Это великолепно, но не очень гибко. К счастью, CSS Grid Layout представляет новую единицу длины под названием fr (сокращение от “fraction”). Mozilla Developer Network определяет единицу fr как единицу длины, представляющую долю доступного пространства в контейнере сетки. Если мы хотим переписать нашу предыдущую сетку чтобы в ней было три равных столбца, мы должны изменить наш CSS используя единицы fr:

Указание repeat()

Возьмите на заметку: если вы поймали себя на повторении единиц длины, используйте указание repeat(). Приведите приведенный выше код к такому виду:

Просмотреть результат можно на Codepen

Просмотрите эту сетку и измените свойство grid-template-columns контейнера сетки на следующее:

Что случилось? Как видите, вы можете не только использовать указание repeat() для части списка рядов, но также и смешивать единицы длины (в данном случае px и fr).

В следующем разделе мы узнаем больше о смешении единиц.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

– базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (, , , …) или (по умолчанию). Если задан как – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

– “жадность” отдельно взятого flex-блока

Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. принимает безразмерное значение ( по умолчанию )

Пример 1:

• Если все flex-блоки внутри flex-контейнера имеют , то они будут одинакового размера
• Если один из них имеет , то он будет в 2 раза больше, чем все остальные

Пример 2:

• Если все flex-блоки внутри flex-контейнера имеют , то они будут одинакового размера
• Если один из них имеет , то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

– фактор “сжимаемости” отдельно взятого flex-блока

Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен .

– выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для )

• : flex-блок прижат к началу поперечной оси
• : flex-блок прижат к концу поперечной оси
• : flex-блок располагаются в центре поперечной оси
• : flex-блок выравнен по baseline
• (значение по умолчанию) : flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются /, если таковые заданы.

– порядок следования отдельно взятого flex-блока внутри flex-контейнера.

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

Значение не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

HTML

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через здесь работает и для вертикали!

Описание и примеры¶

Пример 1

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

У каждой строки должно быть одинаковое количество ячеек. Вы можете использовать любое количество примыкающих точек для объявления пустых ячеек. Пока между точками нет пробелов, они представляют одну ячейку.

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

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

Пример 2

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

Для элементов с классом , , и с помощью свойства задаем собственное имя элемента.

После этого с помощью свойства определяем шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые мы создали с помощью свойства :

В первой строке все столбцы занимает элемент с именем .
Во второй и третьей строке элемент с именем занимает первый столбец, второй и третий столбец занимает элемент с именем , четвертые столбцы мы оставили пустыми

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

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

Результат примера:

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Простой сайдбар

Ино­гда быва­ет нуж­но сде­лать боко­вую панель на сай­те, но так, чтобы:

1. она рас­ши­ря­лась вме­сте с раз­ме­ром окна браузера;
2. при умень­ше­нии раз­ме­ра окна панель тоже умень­ша­лась, пока не достиг­нет сво­е­го мини­маль­но допу­сти­мо­го значения.

Напри­мер, мы зна­ем, что мини­маль­ная шири­на нашей боко­вой пане­ли — 150 пик­се­лей, тогда на ней всё поме­ща­ет­ся. Если будет боль­ше — отлич­но, но мень­ше нельзя.

Что­бы это реа­ли­зо­вать, исполь­зу­ем коман­ду minmax();, в кото­рую пере­да­дим мини­маль­ную и мак­си­маль­ную шири­ну нашей пане­ли. Эта коман­да сама пой­мёт, какую шири­ну нуж­но исполь­зо­вать: если места мало, то исполь­зу­ем мини­маль­ное зна­че­ние, а если места хва­та­ет — то максимальное.

 .parent {

    display: grid;

    grid-template-columns: minmax(150px, 25%) 1fr;

  }

Посмот­ри­те на основ­ную коман­ду grid-template-columns — она зада­ёт колон­ки в сет­ке. Сколь­ко пара­мет­ров, столь­ко и коло­нок. В нашем при­ме­ре два параметра:

• minmax() — он отве­ча­ет за мини­маль­ную и мак­си­маль­ную шири­ну наше­го сайдба­ра слева
• 1fr — это зна­чит, что всё осталь­ное про­стран­ство зай­мёт вто­рая колонка.

Если нам нуж­на боко­вая панель поши­ре — мож­но поста­вить 200 или 300 вме­сто 150.

See the Pen  Про­стой сайдбар by Миха­ил Поля­нин (@mihail-polqnin) on CodePen.

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

Мы уже знаем как размещать элемент на сетке применяя свойства grid-column и grid-row с указанием определенных линий сетки. Мы также можем при определении сетки дать названия всем этим линиям или некоторым из них. Это позволит нам использовать эти названия вместо номеров линий. Чтобы проименовать линию, нужно просто добавить нужное имя в квадратных скобках:

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

Вот наш HTML:

Результат на Codepen

Вы знаете, что используя Firefox DevTools вы можете кастомизировать цвет налагаемой сетки? Пример выше имеет белый фон, а установленный по умолчанию пурпурный – не самый лучший вариант. При выборе опции наложения сетки вы увидите круг рядом с названием сетки, который показывает цвет наложения. Кликните на него и вы сможете выбрать цвет по своему вкусу. Попробуйте какой-нибудь другой цвет, например, красный.

Узнайте больше

Надеемся, это короткое пособие дало вам достаточно сведения для начала экспериментов и построения с использованием CSS Grid Layout. Но мы только приоткрыли самые базовые функции этого мощного инструмента. Если вы готовы копнуть глубже, для вас есть тысячи отличных ресурсов.

Например, сайт и твиттер Джен Симмонс – дизайнерского представителя Mozilla. Она также является разработчиком, писательницей, спикером и членом рабочей группы CSS.

Или сайт и твиттер Рэйчел Андрю — разработчика, спикера и автора. Она также является членом рабочей группы CSS и разрабатывает обучающие ресурсы, посвященные CSS Grid Layout.

MDN – Mozilla Developer Network – имеет понятные руководства и документацию по каждому свойству CSS Grid Layout.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index

Интервалы

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

Важно: даже если между двумя соседними полосами есть интервал, это всё равно одна грид-линия

.my-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.my-grid

1     2      3      4     5
+----+-+----+-+----+-+----+ 1
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 2
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 3
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 4
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 5
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+-+----+-+----+-+----+ 6

Гибкий грид 4х5 с интервалами (зазорами). Интервалы можно делать свойством .

Обращаемся к частям сетки

Grid — это не про­сто таб­ли­ца с ячей­ка­ми. Сила grid — в спо­со­бах выде­ле­ния нуж­ных яче­ек, что­бы ими мож­но было управ­лять отдельно. 

Для того, что­бы опре­де­лить нуж­ную ячей­ку, исполь­зу­ют линии, дорож­ки, обла­сти и ячей­ки сетки:

Линия сет­ки — это линии, кото­рые и фор­ми­ру­ют нашу сет­ку. В нашем при­ме­ре у нас 4 гори­зон­таль­ные линии и 5 вер­ти­каль­ные — пер­вые и послед­ние линии тоже считаются.

Дорож­ка — область от пер­вой линии сет­ки до послед­ней. То, на сколь­ко частей мы раз­де­лим дорож­ки, столь­ко у нас и полу­чит­ся строк и столб­цов. По умол­ча­нию рас­сто­я­ние меж­ду дорож­ка­ми (стро­ка­ми и столб­ца­ми) рав­но нулю, но мы можем изме­нить этот пара­метр и отде­лить дорож­ки друг от дру­га. В этом слу­чае меж­ду ячей­ка­ми появит­ся зазор.

// расстояние между строками

row-gap: 10px;

// расстояние между колонками

column-gap: 5px;

Область сет­ки — пря­мо­уголь­ник, кото­рый полу­чил­ся из нуж­ных нам линий. В нашем при­ме­ре область зада­на лини­я­ми 2 и 4 по гори­зон­та­ли и 3 и 5 — по вертикали:

Что­бы управ­лять пове­де­ни­ем и внеш­ним видом обла­сти, её нуж­но выде­лить в отдель­ный класс:

 .nasha_oblast {

    grid-row-start: 2;

    grid-row-end: 4;

    grid-column-start: 3;

    grid-column-end: 5;

}

Ячей­ка — самая малень­кая область сет­ки, внут­ри кото­рой мож­но что-то раз­ме­стить. По умол­ча­нию каж­дая новая еди­ни­ца кон­тен­та в сет­ке поме­ща­ет­ся в отдель­ную ячей­ку — сле­ва напра­во и свер­ху вниз. Если нуж­но выне­сти кон­крет­ную ячей­ку в отдель­ный класс — дела­ем это так же, как и для области.

Шаблон «сверху вниз»

Мно­гие сай­ты устро­е­ны так: 

• верх­нее меню или шап­ка сайта,
• содер­жи­мое сайта,
• ниж­нее меню или под­вал со слу­жеб­ной информацией.

Теперь всю эту струк­ту­ру мож­но запро­грам­ми­ро­вать все­го одной коман­дой grid-template-rows: auto 1fr auto . Она сде­ла­ет нам три гори­зон­таль­ных бло­ка по такой схеме:

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

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

.parent {

    display: grid;

    grid-template-rows: auto 1fr auto;

  }

See the Pen  Шаб­лон «свер­ху вниз» by Миха­ил Поля­нин (@mihail-polqnin) on CodePen.