css заголовок сетки с содержимым и боковой панелью с максимальной шириной и центром

Question

У меня сбой при попытке сделать эту работу, у меня есть макет, который я сейчас хочу сделать адаптивным, мне нужно, чтобы контент уменьшался при изменении размера браузера, но мне нужно, чтобы боковая панель была фиксированной 300px и сайт чтобы быть в центре с максимальной шириной 960px

до сих пор

.container{
display: grid;
grid-gap: 20px;
grid-template-areas: 
"header  header"
"sidebar content";
grid-template-columns: 1fr 3fr;
}

#header {
grid-area: header;
height: 96px;
}

#mainbar{
grid-area: content;
margin: 0;
padding: 0;
margin-right: 20px;
 }

#sidebar{
grid-area: sidebar;
margin: 0;
margin: 0 0 15px 0
}

никогда не удосужился сделать боковую панель фиксированной шириной 300px, как просто пытался заставить ее работать на любом ширина

 <div class="container">
 <div id="header"></div>
 <div id="mainbar"></div>
 <div id="sidebar"></div>
 </div>

Answer 1

Вам не хватает котировок в конце container. Вам также не хватает точки с запятой на sidebar's margin. Боковая панель также не отображается, потому что она не имеет высоты или ширины.

Проверьте этот пример кода . Я исправил опечатки и дал Sidebar высоту и ширину, это отзывчиво.

Если вы хотите добавить разные стили в зависимости от ширины экрана (то есть, укладывая элементы в мобильном представлении), изучите использование CSS Медиа-запросы .