Question

在我的网格中，我将我的项目显示在3列中。

我想在3列之间绘制一个红色分隔线。

我尝试为细胞添加右边框。

问题：当项目数为4（或7或10等）时，网格中第5个单元格的右边框丢失，因为此网格中没有项目细胞。我希望第2列和第3列之间的边界到达网格的底部。

在不同的屏幕分辨率下，列数可能不同（2或4）。

我想仅使用CSS处理此问题（使用媒体查询）。我不想要任何HTML或JS。

＆＃13;

ul {
   display: grid;
   grid-template-columns: 33% 33% 33%;
   grid-column-gap: 10px;
   width: 500px;
   border: 1px solid black;
   padding: 5px;
   list-style: none;
}
    
li {
   border-right: 2px solid red;
}
    
li:nth-child(3n) {
   border-right: none;
}

＆＃13;

<ul>
  <li> A </li>
  <li> B </li>
  <li> C </li>
  <li> D </li>
</ul>

＆＃13;

https://jsfiddle.net/rh5ru19r/6/

是否有另一种方法可以在列之间绘制分隔符？

感谢您的帮助。

Answer 1

由于您可以使用媒体查询，并且已知列数（2,3或4），因此您可以使用网格和伪元素的背景颜色来使布局正常工作。

revised jsfiddle demo

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21%, 1fr));
  grid-column-gap: 2px;
  background-color: red;
  border: 1px solid black;    
  padding: 0;
  margin: 0;
  list-style: none;
}

@media ( max-width: 700px ) {
  ul { grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); }
  ul::before { content: ""; background-color: white; order: 1; }
  ul::after  { content: ""; background-color: white; order: 2; }  
}

@media ( max-width: 400px ) {
  ul { grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); }
  ul::before { content: none; }
  ul::after  { content: none; }  
}

li {
  padding: 5px;
  text-align: center;
  background-color: white;
}

<ul>
  <li> A </li>
  <li> B </li>
  <li> C </li>
  <li> D </li>
</ul>

在CSS Grid中的所有列上添加分界线

1 个答案: