Сетка внутри флекс с фиксированной шириной левой и правой боковых панелей

Question

Я пытаюсь сделать следующее с помощью html и css: Эскиз изображения

По сути, я хочу сделать это:

• Левая и правая боковые панели имеютШирина 200px всегда, и у них самих нет отступов или полей (они имеют высоту 100%)
• В середине находится div сетки с 12 столбцами и шириной сетки 10px

КакСетка структурирована сама по себе не важна (я знаю эту часть), но мне не удается выровнять div (слева, сетка и правая боковая панель) в правильном порядке.

#container{
	display: flex;
}

#left-sidebar{
	background-color: blue;
	height: 100%;
    width: 200px;
	position: fixed;
	left: 0;
}

#grid{
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(12, 1fr);
	grid-gap: 10px;
	height: 100vh;
	padding: 10px;
  flex: 1;
}

#right-sidebar{
	background-color: blue;
	height: 100%;
    width: 200px;
	position: fixed;
	right: 0;
}

#g1{
	background-color: orange;
	grid-column: 1 / 4;
	grid-row: 1 / last-line;
	border-radius: 4px;
}

#g2{
	background-color: red;
	grid-column: 4 / 13;
	grid-row: 1 / last-line;
	border-radius: 4px;
}

<div id="container">

  <div id="left-sidebar"></div>
  
  <div id="grid">
    <div id="g1"></div>
    <div id="g2"></div>
  </div>
  
  <div id="right-sidebar"></div>
  
 </div>

Я хочу, чтобы сетка была между этими двумя боковыми панелями ...

Answer 1

Вы можете просто добавить отступ 200px слева и справа к вашей сетке, чтобы он находился между боковыми панелями.

#container{
	display: flex;
}

#left-sidebar{
	background-color: blue;
	height: 100%;
    width: 200px;
	position: fixed;
	left: 0;
}

#grid{
  padding-left: 200px !important;
padding-right: 200px !important;
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(12, 1fr);
	grid-gap: 10px;
	height: 100vh;
	padding: 10px;
  flex: 1;
}

#right-sidebar{
	background-color: blue;
	height: 100%;
    width: 200px;
	position: fixed;
	right: 0;
}

#g1{
	background-color: orange;
	grid-column: 1 / 4;
	grid-row: 1 / last-line;
	border-radius: 4px;
}

#g2{
	background-color: red;
	grid-column: 4 / 13;
	grid-row: 1 / last-line;
	border-radius: 4px;
}

<div id="container">

  <div id="left-sidebar"></div>
  
  <div id="grid">
    <div id="g1"></div>
    <div id="g2"></div>
  </div>
  
  <div id="right-sidebar"></div>
  
 </div>