Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
В этом классическом макете Святого Грааля есть заголовок, нижний колонтитул, левая боковая панель, правая боковая панель и основной контент. Он похож на предыдущий макет, но теперь с боковыми панелями!
Чтобы написать всю эту сетку с помощью одной строки кода, используйте свойство grid-template . Это позволяет вам одновременно устанавливать как строки, так и столбцы.
Пара свойства и значения: grid-template: auto 1fr auto / auto 1fr auto . Косая черта между первым и вторым списками, разделенными пробелами, представляет собой разрыв между строками и столбцами.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Как и в последнем примере, где верхний и нижний колонтитулы имели содержимое с автоматическим размером, здесь размер левой и правой боковой панели автоматически изменяется в зависимости от внутреннего размера их дочерних элементов. Однако на этот раз это горизонтальный размер (ширина), а не вертикальный (высота).