时间戳

首页 > 解决方案 > 网格布局以及如何设置多个单元格的样式

css - 网格布局以及如何设置多个单元格的样式

问题描述

我在 css 中使用网格布局（显示：网格）。我想在一列中的所有单元格中都有圆形边框（但不是在一个区域中）。下面的代码和链接：

.myGrid{
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, calc(100%/5));
  grid-template-rows: repeat(5, calc(100%/5));
  height:100%;
  width: 100%;   
  border: 2px solid pink;
}
.oneColumn { /*how to change style for all individual cells in a column?*/
  grid-row-start: 1;    
  grid-row-end: 6;
  grid-column-start: 3;
  border: 1px solid green;
  border-radius: 10px;
  background-color: yellow;  
}
<div class="myGrid">
  <div class="oneColumn">
  </div>
</div>

上述代码的结果是（显然）第 3 列中的所有单元格都被合并，并且 oneColumn 类中定义的区域周围有一个边框。

问题：如何为选定区域中的所有单元格设置边框（和其他样式，例如背景颜色），而不是为区域本身设置边框？

只有 CSS，JavaScript 现在不是一个选项。

谢谢！

标签： cssgridcss-grid

解决方案

推荐阅读