Как я могу избавиться от hardcode в CSS Grid layout?
Как можно улучшить https://jsfiddle.net/v3jq2oy6/ без hardcode values? Чтоб 1, 6, 7, 12, 13, 18, 19, 24 и т.д. занимали 2 ряда по вертикале?
- Вопрос задан более года назад
- 73 просмотра
Комментировать
Решения вопроса 1
.wrapper < display: grid; grid-auto-flow: dense; grid-template-columns: 1fr 1fr; grid-gap: 10px; >.box < background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; >.box:nth-child(6n + 1), .box:nth-child(6n + 6) < grid-row: span 2; >.box:nth-child(6n + 5)
Ответ написан более года назад
Комментировать
Нравится 1 Комментировать
grid — auto — flow
Этим свойством можно поставить грид-элементы на пустое место.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 11 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid — auto — flow .
Пример
Скопировать ссылку «Пример» Скопировано
Принципы работы этого свойства удобнее всего изучать на примере, когда есть большой блок, который не помещается в одну грид-ячейку.
.container display: grid; /* Три колонки */ grid-template-columns: auto auto auto; /* Два ряда */ grid-template-rows: auto auto; /* Автоматическое размещение в ряд */ grid-auto-flow: row; /* Отступы между ячейками */ gap: 20px;> .item3 /* Занимает один ряд и растягивается на две колонки */ grid-column: span 2;>.container display: grid; /* Три колонки */ grid-template-columns: auto auto auto; /* Два ряда */ grid-template-rows: auto auto; /* Автоматическое размещение в ряд */ grid-auto-flow: row; /* Отступы между ячейками */ gap: 20px; > .item3 /* Занимает один ряд и растягивается на две колонки */ grid-column: span 2; >
Как видите, третий элемент не поместился в последнюю ячейку первого ряда и был перенесён на следующую строку. Следующий за ним четвёртый элемент встал в ближайшую доступную ячейку во втором ряду.
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство grid — template — rows командует браузеру, во сколько рядов выстраивать вложенные элементы. И какого размера должны быть эти ряды.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
- column — автоматически размещаемые элементы выстраиваются в колонки.
- dense — браузер старается заполнить пустые ячейки в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.
Для иллюстрации работы ключевого слова dense добавим его к значению свойства grid — auto — flow в примере выше:
.container /* Автоматическое размещение в ряд */ grid-auto-flow: row dense;>.container /* Автоматическое размещение в ряд */ grid-auto-flow: row dense; >
Теперь четвёртый элемент встал в ряд, но занял при этом пустую ячейку в первом ряду. Браузер старается закрыть все дырки в сетке, переставляя подходящие элементы на свободные места.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
Полный список свойств гридов можно посмотреть в гайде по grid.
- Chrome 66, поддерживается 66
- Edge 79, поддерживается 79
- Firefox 76, поддерживается 76
- Safari 12.1, поддерживается 12.1
За что отвечает алгоритм dense html
Группа: Администраторы
Сообщений: 20795
Статус: Offline
1. Visual Studio Code -это
*Программа для загрузки сайта на сервер
*Программа для создания дизайна для сайтов
*Редактор кода
2. Адаптивный макет — это ?
*макет, который может «приспосабливаться» под различные устройства(ширину рабочей области окна браузера)
*макет, который имеет строго определенную ширину (в пикселях)
*макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера
3. Какие существуют виды CSS3?
*2D
*4D
*3D
4. Что задается тегом < tr >?
*строки таблицы
*ячейки таблицы
*ячейки-заголовки
5. Что из ниже перечисленных значений отвечает за воспроизведение анимаций в обратном направлении от того, как они были определены?
*normal
*alternate
*revers
6. Что такое flex container?
*родительский элемент, у которого задано свойство display: flex
*элементы, размещенные в flex контейнере как flex блоки
*ось, которая проходит в том направлении, вдоль которого расположены flex элементы
7. За что отвечает алгоритм dense?
*за смену порядка следования элементов, заполняя пустые места более крупными элементами
*за размещение элементов, заполняя каждую строку по очереди слева-направо, добавляя новые строки по мере необходимости
*за размещение элементов, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости
8. Резиновый макет — это ?
*макет, который может «приспосабливаться» под различные устройства(ширину рабочей области окна браузера)
*макет, который имеет строго определенную ширину (в пикселях)
*макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера
9. Что такое дорожка сетки(grid track)?
*последовательность размера дорожек в единицах длины
*пространство между двумя соседними линиями сетки, используется для определения либо столбца, либо строки сетки
*невидимые горизонтальные и вертикальные разделительные линии, существующие по обе стороны от строки и столбца
10. Что такое flexbox?
*распределенная система контроля версий
*редактор кода
*модуль макета гибкого контейнера
11. Какие существуют типы списков?
*Неупорядоченный
*Развернуть
*Вложенный
*Системный
12. За что отвечает свойство grid-template-areas?
*управляет автоматическим размещением элементов сетки без явного положения
*определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки
*определяет элементы сетки, которые не размещены явно, автоматический перемещаются в незанятое пространство
13. За что отвечает свойство grid-template-rows?
*за количество строк
*за количество столбцом
*за количество символов
14. Каждый элемент упорядоченного списка оборачивается в элемент
*< LI >
*< Le >
*< Ob >
15. Что задается тегом < td >?
*строки таблицы
*ячейки таблицы
*ячейки-заголовки
16. Что определяет свойство анимации animation-direction
*определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах
*определяет, будет ли анимация запущена или приостановлена
*определяет, когда анимация начнется
Генералиссимус
Группа: Администраторы
Сообщений: 20795
Статус: Offline
Тема 1. Из чего состоит сайт. Работа с браузером Тема 2. Редакторы кода Тема 3. Что такое HTML Тема 4. Что такое DOM Тема 5. Базовая структура страницы Тема 6. Атрибуты Тема 7. HTML5 Тема 8. Семантическая верстка Тема 9. Работа с текстом Тема 10. Создание ссылок Тема 11. Работа с изображениями Тема 12. Таблицы Тема 13. Формы Тема 14. Работа с аудио и видео Тема 15. Введение в стили Тема 16. Свойства в CSS Тема 17. Flexbox Тема 18. Grid Тема 19. Работа с макетами 1 часть Тема 20. Работа с макетами 2 часть Тема 21. Адаптивность и кроссбраузерность Тема 22. Анимация в CSS3 Тема 23. Анамация в CSS (практическая часть) Тема 24. Верстка HTML-писем Тема 25. Препроцессоры Тема 26. Переменные и примеси
grid-auto-flow
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.
Интерактивный пример
Синтаксис
/* Ключевые свойства и значения */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* Глобальные значения */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset;
Свойство можно использовать в двух вариантах:
- с одним ключевым значением: row , column , или dense .
- с двумя значениями: row dense или column dense .
Значения
Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.
Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.
Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.
Formal syntax
grid-auto-flow =
[ (en-US) row | (en-US) column ] (en-US) || (en-US)
dense
Пример
HTML Content
div id="grid"> div id="item1">div> div id="item2">div> div id="item3">div> div id="item4">div> div id="item5">div> div> select id="direction" onchange="changeGridAutoFlow()"> option value="column">columnoption> option value="row">rowoption> select> input id="dense" type="checkbox" onchange="changeGridAutoFlow()" /> label for="dense">denselabel>
CSS Content
#grid height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ > #item1 background-color: lime; grid-row-start: 3; > #item2 background-color: yellow; > #item3 background-color: blue; > #item4 grid-column-start: 2; background-color: red; > #item5 background-color: aqua; >
function changeGridAutoFlow() var grid = document.getElementById("grid"); var direction = document.getElementById("direction"); var dense = document.getElementById("dense"); var gridAutoFlow = direction.value === "row" ? "row" : "column"; if (dense.checked) gridAutoFlow += " dense"; > grid.style.gridAutoFlow = gridAutoFlow; >
Спецификация
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |
| Начальное значение | row |
|---|---|
| Применяется к | сеточные контейнеры |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Браузерная совместимость
BCD tables only load in the browser
Смотрите также
- Related CSS properties: grid-auto-rows (en-US), grid-auto-columns (en-US), grid
- Grid Layout Guide: Auto-placement in grid layout (en-US)
- Video tutorial: Introducing Grid auto-placement and order
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.