Как вызвать css grid в javascript

grid

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

Общие сведения

Свойство CSS grid является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ( grid-template-rows , grid-template-columns , и grid-template-areas ), всех неявных свойств сетки (grid) ( grid-auto-rows (en-US), grid-auto-columns (en-US), и grid-auto-flow ), и свойств для промежутков между рядами и столбцами сетки ( grid-column-gap (en-US) и grid-row-gap (en-US)) в одной строчке.

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

• grid-template-rows : none
• grid-template-columns : none
• grid-template-areas : none
• grid-auto-rows (en-US): auto
• grid-auto-columns (en-US): auto
• grid-auto-flow : row
• grid-column-gap (en-US): 0
• grid-row-gap (en-US): 0
• column-gap : normal
• row-gap : normal

• grid-template-rows : относятся к соответствующему размеру области содержимого
• grid-template-columns : относятся к соответствующему размеру области содержимого
• grid-auto-rows (en-US): относятся к соответствующему размеру области содержимого
• grid-auto-columns (en-US): относятся к соответствующему размеру области содержимого

• grid-template-rows : как указано, но с относительной длиной, конвертируемой в абсолютные длины
• grid-template-columns : как указано, но с относительной длиной, конвертируемой в абсолютные длины
• grid-template-areas : как указано
• grid-auto-rows (en-US): процент, как указан, или абсолютная длина
• grid-auto-columns (en-US): процент, как указан, или абсолютная длина
• grid-auto-flow : как указано
• grid-column-gap (en-US): процент, как указан, или абсолютная длина
• grid-row-gap (en-US): процент, как указан, или абсолютная длина
• column-gap : as specified, with s made absolute, and normal computing to zero except on multi-column elements
• row-gap : as specified, with s made absolute, and normal computing to zero except on multi-column elements

• grid-template-rows : simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
• grid-template-columns : simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
• grid-template-areas : discrete
• grid-auto-rows (en-US): by computed value type
• grid-auto-columns (en-US): by computed value type
• grid-auto-flow : discrete
• grid-column-gap (en-US): длина
• grid-row-gap (en-US): длина
• column-gap : длина, проценты или calc();
• row-gap : длина, проценты или calc();

Синтаксис

/* значения*/ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* / [ auto-flow && dense? ] ? values */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* [ auto-flow && dense? ] ? / values */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content); /* Global values */ grid: inherit; grid: initial; grid: unset; 

Значения

Устанавливает auto-flow явно задавая размещение по рядам с помощью свойства grid-template-rows (и устанавливая свойство grid-template-columns в значение none ) и уточняет, как должно работать авто-повторение столбцов при помощи свойства grid-auto-columns (en-US) (и устанавливая grid-auto-rows (en-US) в значение auto ). Свойство grid-auto-flow может быть так же установлено для столбцов со свойством dense если оно определено.Все остальные подсвойства grid сбрасываются в их начальные значения .

Устанавливает auto-flow явно задавая размещение по столбцам с помощью свойства grid-template-columns (и устанавливая свойство grid-template-rows в значение none ) и уточняет, как должно работать авто-повторение рядов при помощи свойства grid-auto-rows (en-US) (и устанавливая grid-auto-columns (en-US) в значение auto ). Свойство grid-auto-flow может быть так же установлено для рядов со свойством dense если оно определено.Все остальные подсвойства grid сбрасываются в их начальные значения .

Formal syntax

grid =
| (en-US)
/ [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) ? (en-US) | (en-US)
[ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) ? (en-US) /

Example

HTML Content

div id="container"> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div> 

CSS Content

#container  display: grid; grid: repeat(2, 60px) / auto-flow 80px; > #container > div  background-color: #8ca0ff; width: 50px; height: 50px; > 

Результат

Спецификация

Specification
CSS Grid Layout Module Level 2 # grid-shorthand

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Связанные свойства CSS: grid-template , grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-columns (en-US), grid-auto-rows (en-US), grid-auto-flow
• Руководство по разметке сетки: Line-based placement with CSS Grid
• Руководство по разметке сетки: Grid template areas — Grid definition shorthands

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Using Javascript with CSS Grid

I am trying to use a JavaScript for loop to auto-generate a 4 by 4 CSS grid. None of the grid items are appearing, except for the light blue background. I am using the appendChild() and setAttribute() functions in two separate for loops: one for rows and one for columns. HTML:

const grid = document.getElementById("grid"); for(let i = 1; i < 5; i++) < for(let x = 1; x < 5; x++) < var item = document.createElement("div"); //item.setAttribute("style", "grid-area:" + i + " / " + x + " / " + i + " / " + x); item.setAttribute("grid-column", x + " / span 1"); item.setAttribute("grid-row", i + " / span 1"); item.setAttribute("class", "grid-item"); grid.appendChild(item); >> 

.grid-container < display: grid; /*width: 50%; height: 100%;*/ grid-template-columns: 30px 30px 30px 30px; grid-template-rows: 30px 30px 30px 30px; gap: 10px; background-color: lightblue; >#grid-item

asked Mar 24, 2022 at 17:44
61 10 10 bronze badges

2 Answers 2

In CSS change your set Attribute from class to id

item.setAttribute("id", "grid-item"); 

Because in css when you use # it’s mean ID but when you use . its mean Class

Расположение элементов по грид-линиям с помощью CSS Grid

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

Собственно, начать квест по гридам со знакомства с пронумерованными линиями — логично, потому что в ситуации, когда вы работаете с гридами, пронумерованные линии у вас есть всегда. Линии нумеруются и для колонок, и для строк, отсчёт начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 — самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.

Базовый пример

В качестве крайне простого примера давайте возьмём грид с тремя треками-колонками и тремя треками-строками. Такой грид даёт нам по 4 линии для каждого направления.

Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу — в каждой из четырёх первых ячеек. Если вы воспользуетесь Firefox Grid Highlighter (en-US) , то увидите, как грид инициирует колонки и строки.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

Позиционирование элементов по номерам линий

Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвёртой строчной линии.

.box1  grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; > 

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

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box2  grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; > .box3  grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; > .box4  grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; > 

Сокращения grid-column и grid-row

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box1  grid-column: 1 / 2; grid-row: 1 / 4; > .box2  grid-column: 3 / 4; grid-row: 1 / 3; > .box3  grid-column: 2 / 3; grid-row: 1 / 2; > .box4  grid-column: 2 / 4; grid-row: 3 / 4; > 

Расположение элемента по умолчанию

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box1  grid-column-start: 1; grid-row-start: 1; grid-row-end: 4; > .box2  grid-column-start: 3; grid-row-start: 1; grid-row-end: 3; > .box3  grid-column-start: 2; grid-row-start: 1; > .box4  grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; > 

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box1  grid-column: 1; grid-row: 1 / 4; > .box2  grid-column: 3; grid-row: 1 / 3; > .box3  grid-column: 2; grid-row: 1; > .box4  grid-column: 2 / 4; grid-row: 3; > 

Свойство grid-area

Мы можем пойти ещё дальше и определить целую область с помощью одного единственного свойства – grid-area . Порядок свойств для грид-области следующий:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box1  grid-area: 1 / 1 / 4 / 2; > .box2  grid-area: 1 / 3 / 3 / 4; > .box3  grid-area: 1 / 2 / 2 / 3; > .box4  grid-area: 3 / 2 / 4 / 4; > 

Порядок значений для grid-area может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращённых свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определёнными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырёх направлений относительно потока:

• block-start (начало блока)
• block-end (конец блока)
• inline-start (начало строки)
• inline-end (конец строки)

Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) — верхняя строчная линия грид-контейнера, конец блока (block-end) — последняя строчная линия контейнера. Начало строки (inline-start) — самая левая колоночная линия, поскольку начало строки — это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) — последняя колоночная линия грида.

Когда мы задаём нашу грид-область с помощью свойства grid-area , мы сначала определяем обе начальные линии block-start и inline-start , а затем обе конечные линии block-end и inline-end . Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания веб-сайты — многонаправленные структуры.

Считая с конца

Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка — самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет -1 , а линий непосредственно перед ними -2, и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (explicit grid), то есть грида, определённого с помощью grid-template-columns и grid-template-rows . Любые линии строк и колонок, добавленные неявным гридом (implicit grid) не считаются.

В примере ниже мы «перевернули» определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краёв.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box1  grid-column-start: -1; grid-column-end: -2; grid-row-start: -1; grid-row-end: -4; > .box2  grid-column-start: -3; grid-column-end: -4; grid-row-start: -1; grid-row-end: -3; > .box3  grid-column-start: -2; grid-column-end: -3; grid-row-start: -1; grid-row-end: -2; > .box4  grid-column-start: -2; grid-column-end: -4; grid-row-start: -3; grid-row-end: -4; > 

Как растянуть элемент на длину всего грида?

Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:

.item  grid-column: 1 / -1; > 

Зазоры (Gutters) или аллеи (Alleys)

Спецификация CSS Grid включает возможность добавлять промежутки (зазоры) между треками-колонками и треками-строками с помощью свойств grid-column-gap (en-US) и grid-row-gap (en-US). Эти свойства задают промежутки, которые во многом действуют точно так же, как свойство column-gap в многоколоночных макетах.

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box1  grid-column: 1; grid-row: 1 / 4; > .box2  grid-column: 3; grid-row: 1 / 3; > .box3  grid-column: 2; grid-row: 1; > .box4  grid-column: 2 / 4; grid-row: 3; > .wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); grid-column-gap: 20px; grid-row-gap: 1em; > 

Сокращённая запись для грид-зазоров

Оба свойства также можно записать с помощью свойства-сокращения grid-gap (en-US). Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для grid-row-gap , а второе — для grid-column-gap .

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); grid-gap: 1em 20px; > 

В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от неё на расстоянии зазора, и вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же — определите трек, а не зазор.

Использование ключевого слова span

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div> 

.box1  grid-column: 1; grid-row: 1 / span 3; > .box2  grid-column: 3; grid-row: 1 / span 2; > .box3  grid-column: 2; grid-row: 1; > .box4  grid-column: 2 / span 2; grid-row: 3; > 

Ключевое слово span также можно использовать в качестве значения grid-row-start / grid-row-end и grid-column-start/grid-column-end . Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.

.box1  grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; > 

Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем span 3 . Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.

.box1  grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; > 

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

Также помните, что элементы на гриде могут перекрывать друг друга, если вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если вы некорректно задали начальные и конечные линии, результат может неприятно вас удивить. Firefox Grid Highlighter (en-US) будет крайне полезен в процессе обучения, особенно, когда вы строите сложные гриды.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Связь Grid позиционирования с другими методами позиционирования

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

Grid и flexbox

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

Одномерное vs Двумерное позиционирование

Простой пример поможет нам продемонстрировать разницу между одно- и двумерным позиционированием.

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

Также установим свойство flex-wrap в значение wrap . Это приведёт к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div> 

.wrapper  display: flex; flex-wrap: wrap; > .wrapper > div  flex: 1 1 200px; > 

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

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

Тот же макет, но с CSS гридами

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div> 

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); > 

Если вы колеблетесь, что выбрать — flexbox или grid, задайте себе простой вопрос:

• нужно управлять размещением элементов в строке или в колонке — используем flexbox
• нужно управлять размещением элементов в строке и в колонке – используем grid

Что важнее: контент или макет?

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

Грид работает, исходя из макета. Когда вы используете CSS Grid Layout, вы создаёте структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жёстко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.

Поэтому, если вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором.

Выравнивание блоков

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

Свойства выравнивания из спецификации flexbox были добавлены в новую спецификацию, названную Box Alignment Level 3. А это означает, что они могут использоваться и в других спецификациях, в том числе и в Grid Layout.

Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.

В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство min-height , и оно задаёт высоту flex-контейнера. Мы установили свойство align-items flex-контейнера в значение flex-end , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства align-self для box1 таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для box2 свойство align-self установлено таким образом, что блок перепрыгнет в начало flex-контейнера.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

.wrapper  display: flex; align-items: flex-end; min-height: 200px; > .box1  align-self: stretch; > .box2  align-self: flex-start; > 

Тем временем в параллельной вселенной: выравнивание в CSS Гридах

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; grid-auto-rows: 200px; > .box1  align-self: stretch; > .box2  align-self: start; > 

Единица fr и flex-basis

Мы уже видели, как работает единица fr в случае пропорционального распределения доступного пространства между грид-треками в грид-контейнере. При комбинировании fr с функцией minmax() мы получаем поведение, очень похожее на свойство flex в flexbox — и при этом по-прежнему можем создавать макет в двумерной системе.

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

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

Автозаполнение грид-треков

Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жёсткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства auto-fill и auto-fit .

В примере ниже мы используем ключевое слово auto-fill вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div> 

.wrapper  display: grid; grid-template-columns: repeat(auto-fill, 200px); > 

Переменное количество треков

Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя auto-fill и функцию minmax() . В примере ниже мы создаём автозаполненные треки с помощью minmax . Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим 1fr . В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере — при этом учитывая грид-зазоры — он расценивает максимум 1fr как инструкцию распределить оставшееся свободное пространство между этими блоками.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div> 

.wrapper  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); > 

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

Гриды и абсолютно позиционированные элементы

Грид взаимодействует с абсолютно позиционированными элементами, что отнюдь не бесполезно, если вы хотите разместить элемент внутри грида или грид-области. В спецификации описано поведение грида и тогда, когда грид-контейнер является контейнерным блоком (containing block) и тогда, когда грид-контейнер — родительский элемент для абсолютно позиционированного элемента.

Грид-контейнер как контейнерный блок

Для того, чтобы превратить грид-контейнер в контейнерный блок вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу position: absolute , грид-контейнер станет контейнерным блоком для данного элемента.

В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера position: relative , поэтому он становится контекстом позиционирования для нашего третьего элемента.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3"> Этот блок абсолютно позиционирован. В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещён элемент. div> div class="box4">Fourdiv> div> 

.wrapper  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-gap: 20px; position: relative; > .box3  grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; position: absolute; top: 40px; left: 40px; > 

Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.

Попробуйте удалить position: absolute из правил для .box3 , и увидите, как он размещался бы без абсолютного позиционирования.

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

Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создаёт этот контекст позиционирования. Словом, если в нашем примере мы уберём position: relative из блока-обёртки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.

Ещё раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.

А что если родительский элемент — это грид-область?

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

Задаём .box3 свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3"> Three div class="abspos"> Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования является грид-область, поэтому значения сдвига отсчитываются от внешних краёв грид-области. div> div> div class="box4">Fourdiv> div> 

.wrapper  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-gap: 20px; > .box3  grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; position: relative; > .abspos  position: absolute; top: 40px; left: 40px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.5); color: #000; padding: 10px; > 

Грид и display: contents

Последнее, о чем нужно упомянуть, говоря о взаимодействии гридов с другими спецификациями, касающимися позиционирования элементов, — это взаимодействие между CSS Grid Layout и display: contents . Значение contents свойства display — новое свойство CSS, которое описывается в спецификации Display следующим образом:

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

Если вы пишете для элемента display: contents , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберёмся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .box  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested  border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; > 

div class="wrapper"> div class="box box1"> div class="nested">adiv> div class="nested">bdiv> div class="nested">cdiv> div> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div> 

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); > .box1  grid-column-start: 1; grid-column-end: 4; > 

Если мы теперь добавим правило display: contents для box1 , блок этого бокса исчезнет, зато дочерние элементы станут грид-элементами и будут расположены в соответствии с правилами авторазмещения.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .box  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested  border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; > 

div class="wrapper"> div class="box box1"> div class="nested">adiv> div class="nested">bdiv> div class="nested">cdiv> div> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div> 

.wrapper  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); > .box1  grid-column-start: 1; grid-column-end: 4; display: contents; > 

Таким образом мы можем заставить вложенные элементы вести себя, словно они часть грида (и в некотором смысле имитация того поведения, которое должны будут реализовать подгриды (subgrids), когда руки разработчиков браузеров до них доберутся). Точно так же можно использовать display: contents с flexbox, чтобы вложенные элементы становились flex-элементами.

UPD: На 04.02.2018 главная проблема с display: contents в том, что «редкий браузер долетел до середины Днепра», поддержка у свойства — отсутствует. Следите за обновлениями https://caniuse.com/#feat=css-display-contents

Как вы могли увидеть, CSS Grid Layout — это часть вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Элементы и граница Grid layout

Выходят дочерние элементы за границу родительского блока. Все перепробовал ничего не помогло. Как добиться результата как на картинке при помощи Grid-Css?

let main = document.querySelector('.main_block'); let child_block = document.querySelector('.child_block'); for(let i = 0; i

.main_block < display:grid; grid-template-columns: 100%; padding:10px; margin:50px; border:1px solid black; >.child_block < display:grid; grid-auto-flow: column; >.block

How to access CSS Grid properties w/ Javascript

I’m creating a dashboard with drag and drop. The main purpose of that dashboard is that the user can customize the cards and their position on the grid. So, for that funcionality I wanna get the columns and row to dinamically fill the empty cells with placeholders for the drag and drop. There’s a way to get the CSS Grid properties via Javascript?

asked Jun 22, 2020 at 19:36
Gabriel de Oliveira Gabriel de Oliveira
55 1 1 silver badge 9 9 bronze badges

This is too broad a question. You want to first figure out what CSS styles (or HTML element positions) change the grid in the way you desire, for a given drag/drop event. Then program accordingly.

Адаптивная masonry сетка на JS и CSS Grid

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

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

Для использования вам необходимо установить саму библиотеку:

Как использовать CSS Grid для создания макета сайта

CSS Grid является мощным инструментом для создания макетов веб-страниц. В этой статье мы рассмотрим основы работы с CSS Grid и приведем примеры его использования для создания разнообразных макетов сайтов.

Основы CSS Grid

CSS Grid – это двумерная система разметки, которая позволяет создавать сложные макеты с использованием строк и столбцов. Для начала работы с Grid, необходимо задать контейнеру свойство display: grid; .

Создание сетки

Для создания сетки с определенным количеством строк и столбцов используются свойства grid-template-rows и grid-template-columns . Например, создадим сетку с тремя строками и двумя столбцами:

.container

Здесь 1fr означает одну равную долю места, доступного в контейнере. Таким образом, мы создаем сетку, где все ячейки имеют одинаковый размер.

Размещение элементов

Чтобы разместить элементы внутри сетки, используется свойство grid-column и grid-row . Они позволяют указать начальную и конечную позиции элемента в сетке. Например:

.item < grid-column: 1 / 3; grid-row: 1 / 2; >

Этот код размещает элемент на первой строке, занимая оба столбца.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Пример макета сайта с использованием CSS Grid

Давайте создадим простой макет сайта с использованием CSS Grid. Макет будет состоять из шапки, основного контента, боковой панели и подвала.

         
Header
 
Main Content
   
   

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

�� Теперь вы знаете основы работы с CSS Grid и можете использовать его для создания макетов сайтов. Удачи в изучении веб-разработки!