flex内部带有固定宽度的左右侧边栏的网格

Question

我正在尝试使用html和css进行以下操作： Image sketch

基本上，我想做到这一点：

• 左右侧边栏始终始终为200px宽度，它们本身没有填充或边距（高度为100％）
• 中间有12列的网格div和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>