Продолжая предыдущий пример, автор также хочет, чтобы игра адаптировалась к различным устройствам. Кроме того, игра должна оптимизировать расположение компонентов при просмотре в книжной или альбомной ориентации (рисунки 6 и 7). Комбинируя компоновку сетки с медиазапросами, автор может использовать одну и ту же семантическую разметку, но изменить компоновку элементов независимо от их исходного порядка, чтобы добиться желаемой компоновки в обеих ориентациях.
В следующем примере используется возможность расположения сетки в качестве имени пространства, которое будет занимать элемент сетки . Это позволяет автору избегать переписывания правил для элементов сетки при изменении определения сетки.
@media ( ориентация : портрет) {
grid {
дисплей: сетка;
/ * Строки, столбцы и области сетки определяются визуально
* используя свойство grid-template-Area. Каждая строка является строкой,
* и каждое слово область. Количество слов в строке
* определяет количество столбцов. Обратите внимание на количество слов
* в каждой строке должно быть идентично. * /
grid-template-area: "статистика заголовков"
"оценка статистики"
"доска доска"
"ctrls ctrls";
/ * Путь к размеру столбцов и строк может быть назначен с помощью
* свойства grid-template-columns и grid-template-row. * /
grid-template-columns: auto 1fr;
grid-template-row: auto auto 1fr auto;
}
}
@media (ориентация: пейзаж) {
grid {
дисплей: сетка;
/ * Опять же свойство шаблона определяет области с одинаковыми именами,
* но на этот раз по-другому, чтобы лучше соответствовать
* альбомная ориентация. * /
grid-template-area: "титульная доска"
"доска статистики"
"оценка ctrls";
grid-template-columns: auto 1fr;
grid-template-row: auto 1fr auto;
}
}
/ * Свойство grid-area помещает элемент сетки в именованный
* площадь сетки. * /
#title {grid-area: title}
#score {grid-area: score}
#stats {grid-area: stats}
#board {grid-area: board}
#controls {grid-area: ctrls}
< div id = "grid" >
< div id = "title" > Название игры </ div >
< div id = "score" > Счет </ div >
< div id = "stats" > Статистика </ div >
< div id = "board" > Board </ div >
< div id = "controls"> Элементы управления </div >
</ div >
Примечание. Возможности упорядочить макет сетки преднамеренно влияют только на визуальный рендеринг , оставляя речевой порядок и навигацию на основе исходного порядка. Это позволяет авторам манипулировать визуальным представлением, оставляя исходный порядок нетронутым и оптимизированным для UA не-CSS и для линейных моделей, таких как речь и последовательная навигация.
Размещение и упорядочевание элементов сетки не должны использоваться в качестве замены для правильного упорядочения источника, поскольку это может нарушить доступность документа.