CSS 固定网格边填充在网格列上消失

Question

* {
  /* CSS Reset! */
  margin: 0;
  /* They cascade, so for them to be accessible in
  the sidebar div, you have to make them available for all */
  --SideBarButtonSide: 36px;
  --SideBarOffsetX: 16px;
  --SideBarOffsetY: 17px;
}

#SideBar {
  position: fixed;
  top: calc(2*var(--SideBarOffsetY) + var(--SideBarButtonSide));
}

#SideBar #SideBarGrid {
  display: grid;
  --SideBarTextHeight: 45px;
  grid-template-columns: 1fr 250px 1fr;
  grid-template-rows: 40px 200px 20px var(--SideBarTextHeight) 20px 200px;
}

#SideBarGrid #BrandLogo {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  margin: auto;
}

#SideBarGrid #SideBarText {
  grid-column: 2 / 3;
  grid-row: 4 / 5;

  text-align: center;
  line-height: var(--SideBarTextHeight);
  font-size: 35px;
}

#SideBarGrid #SideBarLinks {
  /* 1 / 2 and 3 / 4 work just fine! but try 2 / 3! */
   grid-column: 2 / 3;
  grid-row: 6 / 7;
}

https://codepen.io/Whiteclaws/live/vpbRXL

https://imgur.com/a/fAHVd

这个问题比较难表达，大家自己看codepen吧...

小型 codepen 和 imgur gallery 很好地描述了这些问题....您可以切换到 position: relative 并且它会工作得很好！但这违背了侧边栏的意义...

注意：还有一件事，它在三个元素处中断，如果我只放入两个（品牌徽标和侧边栏文本，它工作正常！！）

注意 2：即使没有链接，它也能收支平衡，就此而言，只要有 SideBarLinks div 就可以打破它！

Answer 1

尝试将 grid-template-columns: 1fr 250px 1fr; 更改为 grid-template-columns: 1fr 1fr 250px;。这就是你想要的？

CSS 固定网格边填充在网格列上消失

CSS fixed grid side padding disappears on grid-column

html

css

grid

css-grid