ПРИМЕЧАНИЕ: Я также сделал видео, объясняющее мой вопрос: https://www.loom.com/share/9ebf0ab686b54ad9a36bffe375098e49
Я настроил следующую сетку CSS:
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: 60px 1fr 60px;
grid-template-areas:
'header header'
'main sidebar'
'footer footer';
min-height: 100vh;
`
Это в основном работает как надо - он дает мне заголовок, нижний колонтитул, раздел основного контента и боковую панель.
Хотя я бы хотел сделать центрирование разделов Main и Sidebar, а не иметьони охватывают 100% ширины.В качестве примера, мы можем взглянуть на базовый макет страницы этого сайта: https://thrivethemes.com/blog/
Я хотел бы сделать что-то похожее с помощью CSS Grid - то есть иметь тот же макет,но просто объедините разделы Main и Sidebar в 1180 пикселей (на больших экранах).
Теперь вот одно решение, о котором я подумал:
display: grid;
grid-template-columns: auto 880px 300px auto;
grid-template-rows: 60px 1fr 60px;
grid-template-areas:
'header header header header'
'. main sidebar .'
'footer footer footer footer';
И оно работает.Но мне интересно, есть ли лучший способ, который не требует создания дополнительных столбцов, которые мне не нужны?