Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Грид-разметка CSS
Грид-разметка CSS (CSS Grid Layout) – это сетка из горизонтальных и вертикальных линий, которые образуют столбцы и строки.
Грид-разметка объединяет в себе набор свойств для родительского грид-контейнера и для дочерних грид-элементов.
Чтобы элемент стал грид-контейнером, ему надо присвоить display: grid; или display: inline-grid; (блочный или строчный соответственно).
Свойства grid-контейнера
- grid-template-columns
-
Определяет число и (ширину) столбцов. Возможные значения:
- none – столбцы создаются по необходимости (по умолчанию);
- auto – определяется размером контейнера, а также размером содержимого элементов в столбце;
- max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
- min-content – размер, равный длине самой широкой части контента;
- значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
- repeat() – функция, первый параметр которой – число повторений, второй – ширина или несколько ширин через пробел.
- grid-template-rows
-
Определяет число и (высоту) строк. Возможные значения:
- none – строки создаются по необходимости (по умолчанию);
- auto – определяется размером контейнера, а также размером содержимого элементов в строке;
- max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
- min-content – размер, равный высоте самой высокой части контента;
- значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
- repeat() – функция, первый параметр которой – число повторений, второй - высота или несколько высот через пробел.
- grid
-
Определяет сразу два свойства grid-template-columns и grid-template-rows в формате:
grid: grid-template-columns / grid-template-rows;
Например, grid: repeat(4, 1fr) / repeat(3, 8rem); - grid-template-areas
-
Определяет области в грид-разметке путем размещения в них именованных элементов.
Например, grid-template-areas: 'header header header header' 'menu main main main' 'footer footer footer footer'; - row-gap
-
Определяет промежутки между строками, т.е. вертикальные промежутки.
Задается в px, %, em и других единицах измерения.
Например: row-gap: 24px; - column-gap
-
Определяет промежутки между столбцами, т.е. горизонтальные промежутки.
Задается в px, %, em и других единицах измерения.
Например: column-gap: 16px; - gap
-
Определяет сразу два свойства row-gap и column-gap,
может иметь одно или два значения.
Например: gap: 24px 16px;Первоначально свойство определялось, как grid-gap. В CSS3 его заменили на gap. Поддержка браузерами.
- justify-content
-
Определяет, как распределяется свободное пространство между grid-элементами по горизонтали. Возможные значения:
- start – элементы прижимаются к левому краю (по умолчанию);
- end – элементы прижимаются к правому краю – Пример;
- center – элементы выравниваются по центру строки;
- space-between – первый элемент прижимается к началу строки, последний - к концу, а оставшиеся выстраиваются так, чтобы между ними были одинаковые промежутки;
- space-around – свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются, и расстояние между соседними элементами в два раза больше, чем расстояние от крайних элементов до концов строки;
- space-evenly – свободное пространство делится поровну между элементами, при этом расстояние между соседними элементами и расстояние от крайних элементов до концов строки одинаковые – Пример.
Cвойство justify-content не срабатывает, если используются fr-единицы, и grid-контейнер имеет тот же размер, что и сетка.
- justify-items
-
Определяет выравнивание элементов по горизонтали. Возможные значения:
- start – элементы прижимаются к левым краям своих ячеек (по умолчанию);
- end – элементы прижимаются к правым краям своих ячеек – Пример;
- center – элементы выравниваются по центру своих ячеек;
- stretch – элементы растягиваются, занимая всю ширину ячееек. Но если для элементов задана ширина, то значение stretch будет проигнорировано.
- align-content
-
Определяет, как распределяется свободное пространство между grid-элементами по вертикали. Возможные значения:
- start – элементы прижимаются к верхнему краю (по умолчанию);
- end – элементы прижимаются к нижнему краю;
- center – элементы выравниваются по центру столбца;
- space-between – первый элемент прижимается к верху столбца, последний - к низу, а оставшиеся выстраиваются так, чтобы между ними были одинаковые промежутки;
- space-around – свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются, и расстояние между соседними элементами в два раза больше, чем расстояние от крайних элементов до верха и низа столбца;
- space-evenly – свободное пространство делится поровну между элементами, при этом расстояние между соседними элементами и расстояние от крайних элементов до верха и низа столбца одинаковые.
Свойство align-content срабатывает, если в grid-контейнере больше одной строки элементов,
и высота родителя больше, чем суммарная высота всех элементов во всех строках. - align-items
-
Определяет выравнивание элементов по вертикали. Возможные значения:
- start – элементы прижимаются к верху своих ячеек;
- end – элементы прижимаются к низу своих ячеек;
- center – элементы выравниваются по вертикальному центру своих ячеек;
- stretch – элементы растягиваются, занимая всю высоту ячееек (по умолчанию).
- place-items
-
Определяет сразу два свойства align-items и justify-items
и именно в таком порядке.
Например: place-items: space-between end; - grid-auto-flow
-
Определяет порядок автоматического размещения элементов. Возможные значения:
- row – элементы заполняют каждую строку поочередно, добавляя по мере необходимости новые строки (по умолчанию);
- column – элементы заполняют каждый столбец поочередно, добавляя по мере необходимости новые столбцы;
- dense – «плотный» алгоритм заполнения, который пытается занять отверстия в сетке, если позже появятся более мелкие элементы.
- grid-auto-rows
-
Определяет размер строк. Возможные значения:
- auto – высота строк определяется высотой контейнера (по умолчанию);
- max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
- min-content – размер, равный высоте самой высокой части контента;
- значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
- minmax(min, max) – диапазон размеров: больше или равен min и меньше или равен max.
- grid-auto-columns
-
Определяет размер столбцов. Возможные значения:
- auto – ширина столбцов определяется шириной контейнера (по умолчанию);
- max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
- min-content – размер, равный ширине самой широкой части контента;
- значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
- minmax(min, max) – диапазон размеров: больше или равен min и меньше или равен max.
Свойства grid-элементов
- grid-column-start
-
Определяет, на каком столбце будет начинаться элемент.
Возможные значения:
- auto – элемент будет помещен после потока (по умолчанию);
- значение – номер столбца, с которого должно начинаться отображение элемента.
- grid-column-end
-
Определяет, сколько столбцов будет занимать элемент.
Возможные значения:
- auto – элемент будет занимать один столбец (по умолчанию);
- span n – количество столбцов;
- значение – номер столбца, на котором должно закончиться отображение элемента.
- grid-column
-
Определяет сразу два свойства grid-column-start и grid-column-end в формате:
grid-column: grid-column-start / grid-column-end;
Например: grid-column: 1 / 3; - grid-row-start
-
Определяет, на какой строке будет начинаться элемент.
Возможные значения:
- auto – элемент будет помещен после потока (по умолчанию);
- значение – номер строки, с которой должно начинаться отображение элемента.
- grid-row-end
-
Определяет, сколько строк будет занимать элемент.
Возможные значения:
- auto – элемент будет занимать одну строку (по умолчанию);
- span n – количество строк;
- значение – номер строки, на которой должно закончиться отображение элемента.
- grid-row
-
Определяет сразу два свойства grid-column-start и grid-column-end в формате:
grid-row: grid-row-start / grid-row-end;
Пример - justify-self
-
Переопределяет выравнивание, заданное по умолчанию или в justify-items, для конкретного grid-элемента. Возможные значения:
- start – элемент прижимается к левому краю своей ячейки (по умолчанию);
- end – элемент прижимается к правому краю своей ячейки;
- center – элемент выравнивается по центру своей ячейки;
- stretch – элемент растягивается, занимая всю ширину своей ячейки. Но если для элементов задана ширина, то значение stretch будет проигнорировано.
- align-self
-
Переопределяет выравнивание, заданное по умолчанию или в align-items, для конкретного grid-элемента. Возможные значения:
- start – элемент прижимается к верху своей ячейки;
- end – элемент прижимается к низу своей ячейки;
- center – элемент выравнивается по вертикальному центру своей ячейки;
- stretch – элемент растягивается, занимая всю высоту ячейки (по умолчанию).
Единица измерения fr
В грид-разметке появилась новая единица измерения fr, которая представляет собой долю (fraction) доступного пространства в грид-контейнере (см. спецификацию). Единица fr берет 100% экрана и равномерно распределяет его между элементами сетки.
Рассмотрим несколько примеров с одинаковым кодом:
<style>
.grid {
display: grid;
}
</style>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
}
и разными вариантами использования fr.
1. Столбцы с одинаковой шириной
Чтобы создать три одинаковые по ширине столбца, расширяющихся и сужающихся в соответствии с доступным пространством, надо всем им задать размер в 1fr.
.grid {
grid-template-columns: 1fr 1fr 1fr;
}
РЕЗУЛЬТАТ:
2. Столбцы с разными размерами
Чтобы первый и третий столбец были в два раза уже среднего, надо разбить доступное пространство на 4 части, из которых две займет средний столбец, а два крайних - по одной части:
.grid {
grid-template-columns: 1fr 2fr 1fr;
}
РЕЗУЛЬТАТ:
3. Сочетание разных единиц измерения
Можно сочетать fr с процентными и фиксированными значениями:
.grid {
grid-template-columns: 100px 1fr 2fr 20%;
}
РЕЗУЛЬТАТ:
4. Функция repeat()
Чтобы повторить всю структуру столбцов или её часть, используют функцию repeat(), которая является укороченной формой записи. Таким образом, первый пример можно переписать так:
.grid {
grid-template-columns: repeat(3, 1fr);
}
РЕЗУЛЬТАТ:
В следующем примере repeat() использована для части страктуры:
.grid {
grid-template-columns: 50px repeat(2, 1fr) 50px;
}
РЕЗУЛЬТАТ:
Повторять можно не одно, а несколько значений, указанных через пробел:
.grid {
grid-template-columns: repeat(2, 1fr 2fr);
}
РЕЗУЛЬТАТ:
5. Функция minmax()
Чтобы задать диапазон размеров, используют функцию minmax(), задавая минимальную и максимальную ширину столбца (или высоту строки). Как меняется ширина первого столбца, можно увидеть, меняя размер экрана браузера:
.grid {
grid-template-columns: minmax(200px, 300px) repeat(3, 1fr);
}
РЕЗУЛЬТАТ:
Использование auto в качестве одного из параметров функции minmax() означает, что строка или столбец "растянется" до размера контента. Например, минимальная высота строки 100px, а максимальная равна высоте самой большой ячейки:
<style>
.grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
}
</style>
<div class="grid">
<div>1</div>
<div>2<br>Более<br>высокая<br>строка</div>
<div>3</div>
<div>4</div>
</div>
РЕЗУЛЬТАТ:
Более
высокая
строка
6. В качестве заключения...
Поддержка CSS Grid Layout осуществляется практически всеми современными браузерами.
Читать дальше: Фильтры
.
Прокомментировать/Отблагодарить