Классические 3 колонки

У этого макета html-страницы есть верхний и нижний колонтитулы (шапка и подвал), левая и правая боковые панели, основной контент.

Чтобы написать такую сетку с помощью всего одной строки кода, можно использовать CSS-свойство grid-template. Это позволяет одновременно устанавливать параметры строк и столбцов шаблона.

Пара свойство и значение: grid-template: auto 1fr auto / auto 1fr auto. Косая черта между первым и вторым списками параметров – разделитель настроек для строк и столбцов.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

Здесь левая и правая боковые панели автоматически изменяют свою ширину в зависимости от размера их дочерних элементов.

See this code Classic 3-cols layout on x.xhtml.ru.