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

Question

我正在尝试使用 html 和 css 进行以下操作： 图像草图

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

• 左侧和右侧边栏始终具有 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>

我希望网格位于这两个侧边栏之间...

标签： htmlcssflexboxcss-grid

Answer 1

您可以在网格的左侧和右侧添加一个 200 像素的填充，因此它位于侧边栏之间。

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