Макет сетки можно использовать для интеллектуального изменения размера элементов на веб-странице. Смежные фигуры представляют игру с пятью основными компонентами в макете: название игры, область статистики, игровое поле, область счета и область управления. Цель автора - разделить пространство для игры таким образом, чтобы:
- Область статистики всегда появляется сразу под названием игры.
- Игровое поле появляется справа от статистики и названия.
- Верхняя часть названия игры и игровое поле всегда должны совпадать.
- Нижняя часть игрового поля и нижняя часть области статистики совпадают, когда игра достигает минимальной высоты. Во всех других случаях игровое поле растягивается, чтобы использовать все доступное для него пространство.
- Управление сосредоточено под игровой доской.
- Верх области оценки выровнен по верху области управления.
- Область оценки находится ниже области статистики.
- Область очков выровнена с элементами управления под областью статистики.
В следующем примере макета сетки показано, как автор может декларативно выполнить все правила определения размера, размещения и выравнивания.
Пять элементов сетки расположены в соответствии с размером контента и доступным пространством.
* Определите пространство для каждого элемента сетки , объявив сетку
* в контейнере сетки .
* /
grid {
/ **
* Два столбца:
* 1. первый размер для содержимого,
* 2. второй получает оставшееся пространство
* (но никогда не меньше минимального размера доски
* или игровых элементов управления, которые занимают этот столбец [Рис. 4])
*
* Три строки:
* 3. первый размер для содержимого,
* 4. средний ряд получает оставшееся пространство
* (но никогда не меньше минимальной высоты
* областей доски или статистики)
* 5. последний размер к содержанию.
* /
дисплей : сетка ;
grid-template-columns :
/ * 1 * / auto
/ * 2 * / 1 фр . ;
grid-template-lines :
/ * 3 * / auto
/ * 4 * / 1 fr
/ * 5 * / auto ;
}
/ * Укажите положение каждого элемента сетки, используя координаты
* в свойствах 'grid-row' и 'grid-column' каждого элемента сетки .
* /
#title { grid-column : 1 ; Сетка-ряд : 1 ; }
#score { grid-column : 1 ; сетка-ряд : 3 ; }
#stats { grid-column : 1 ; сетка-ряд : 2 ; выровнять себя : начать ; }
#board { grid-column : 2 ; сетка-ряд : 1 / пролет 2 ; }
#controls { grid-column : 2 ; Сетка-ряд : 3; оправдать себя : центр ; }
< 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 >
Примечание. Существует несколько способов задания структуры сетки и позиционирования и определения размеров элементов сетки , каждый из которых оптимизирован для различных сценариев.