Мобильная версияЕсли возникает конфликт, всегда ли столбец сетки и строка сетки имеют приоритет над порядком в сетке?
Документация
Сокращения размещения
Алгоритм размещения элемента сетки
Порядок отображения: свойство порядка
Контейнеры Flex и Grid размещают свое содержимое в измененном порядке документов, начиная с порядковая группа с наименьшим номером и идет вверх. Элементы с одинаковой порядковой группой располагаются в порядке их появления в исходном документе.
Алгоритм автоматического размещения работает с элементами сетки в измененном порядке документа, а не в исходном порядке документа.
Из спецификации кажется, что порядок сначала применяется, а затем запускается алгоритм размещения, чтобы применить все необходимые изменения.
Примеры
В В следующем фрагменте сетка с четырьмя столбцами и одной строкой упорядочивает элементы сетки в обратном порядке с помощью свойства order.
Код: Выделить всё
#grid-container
{
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px;
}
.grid-item
{
color: white;
background-color: darkblue;
border: 1px solid white;
}
.grid-item:nth-child(1)
{
order: 4;
}
.grid-item:nth-child(2)
{
order: 3;
}
.grid-item:nth-child(3)
{
order: 2;
}
.grid-item:nth-child(4)
{
order: 1;
}
body
{
background-color: black;
}Код: Выделить всё
1
2
3
4
В этом фрагменте конфликтуют столбец сетки и сетка Добавляются свойства -row, которые имеют приоритет над order.
Код: Выделить всё
#grid-container
{
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px;
}
.grid-item
{
color: white;
background-color: darkblue;
border: 1px solid white;
grid-row: 1 / 2;
}
.grid-item:nth-child(1)
{
order: 4;
grid-column: 1 / 2;
}
.grid-item:nth-child(2)
{
order: 3;
grid-column: 2 / 3;
}
.grid-item:nth-child(3)
{
order: 2;
grid-column: 3 / 4;
}
.grid-item:nth-child(4)
{
order: 1;
grid-column: 4 / 5;
}
body
{
background-color: black;
}Код: Выделить всё
1
2
3
4
Заключение
Основываясь на небольших тестах, подобных приведенным выше, и спецификации, я думаю, что ответ, вероятно, заключается в том, что свойства размещения всегда имеют приоритет над порядком, если возникает конфликт. Но было бы лучше иметь однозначный ответ или знать случаи, когда порядок может иметь приоритет.
Подробнее здесь: https://stackoverflow.com/questions/785 ... n-grid-row
