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

Question

我正在尝试用html和CSS制作以下内容：图像草图

基本上，我想完成这一点：

• 左右边栏的宽度始终为200px，它们本身没有页边距或页边距（它们的高度为100%)
• 中间为12列网格div，网格间隙为10px

网格如何结构化本身并不重要（我知道这部分），但是我没有按照正确的顺序对齐div（左、网格和右侧栏）。

null

#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>

null

我要格子在两个边栏之间...

Answer 1

您可以在网格的左右两边添加一个200px的填充，这样它就在边栏之间了。

null

css prettyprint-override">#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>