Question

有没有办法在CSS网格布局模块中设置不仅仅是网格间隙宽度的样式？我在文档中找不到任何关于它的内容，但是人们倾向于认为有可能因为网格间隙在许多设计中都有颜色。如果不可能，是否有解决方法？

Answer 1

例如：如果一个人有一个5x5的正方形网格，是获得彩色网格线以用25个元素填充网格并将边框应用于这些相同元素的唯一方法吗？

您可以这样做，但网格边框不会像表格边框与border-collapse属性一样折叠，与网格间隙不同，它们将与内边框一起应用于网格的边界，这可能是不希望的。另外，如果您有grid-gap声明，则差距会将您的网格项边框分开，就像border-collapse: separate与表格边框一样。

grid-gap是用于间隔网格项目的惯用方法，但它并不理想，因为网格间隙只是：空白空间，而不是物理框。为此，为这些间隙着色的唯一方法是将背景颜色应用于网格容器。

Answer 2

可悲的是，目前CSS Grid规范中没有办法设置grid-gap样式。我提出了一个效果很好的解决方案，虽然只涉及html和css：show border grid lines only between elements

Answer 3

而是使用solution above我建议将border与伪类一起使用，因为如果你有不规则数量的＆＃34;表格单元格＆＃34;你会在＆＃34;表格的末尾找到一个难看的颜色填充单元格。

如果你想在＆＃34;表格单元格之间使用边框＆＃34;并且你并不总是使用相同数量的单元格来执行此类操作（此示例也适用于flexbox）：

＆＃13;

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* with flexbox:
  display: flex;
  flex-wrap: wrap;
  */
}

/* Add border bottom to all items */
.item {
  padding: 10px;
  border-bottom: 1px solid black;
  /* with flexbox:
  width: calc(50% - 21px);
  */
}

/* Remove border bottom from last item & from second last if its odd */
.item:last-child, .item:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

/* Add right border to every second item */
.item:nth-child(odd) {
  border-right: 1px solid black;
}

＆＃13;

<div class="wrapper">
  <div class="item">BOX 1</div>
  <div class="item">BOX 2</div>
  <div class="item">BOX 3</div>
  <div class="item">BOX 4</div>
  <div class="item">BOX 5</div>
</div>

＆＃13;

Answer 4

我将边框颜色添加为网格的背景色，并为所有网格项目添加了背景色。

.grid {
  width: 1000px;
  display: grid;
  background: #D7D7D7;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 1px;
}

.grid-item {
  background: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</body>

</html>

这对我有用。

Answer 5

如果可行，您可以使用border而不是grip或仅更改背景颜色。

.yourDiv {
    border-right: 5px solid rgb(110, 0, 210);
    border-top: 10px solid rbg(255, 255, 0);
}

希望它有所帮助！

Answer 6

在网格上设置背景颜色将为您的间隙着色。例如：

    section {
            display: grid;
            grid-gap: 15px;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            background-color: red;
        }

Answer 7

也许此解决方案将为您提供帮助：https://codepen.io/skaya/pen/qBWwMXB

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  column-gap: 1px;
  row-gap: 1px;
  overflow: hidden;
}

.item {
  padding: 16px 40px;
  box-shadow: 0 0 0 1px #E5E5EA;
}

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
</div>

Answer 8

已经有一段时间了，但是我设法使它起作用：我在网格容器上放置了一个背景，并在边框上插入了想要的边框厚度的网格间隙，然后分别在项目中添加了背景色：

`.grade {
    margin: 20px;

    height: 220px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1px;

    border-radius: 5px;
    background: #DDDDDD;
    box-shadow: 0px 0px 10px #DDDDDD;
}

.grade .item {
    background: #fff;
}`

我的html：

`<div class="grade">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>`

Answer 9

.listing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-bottom: 0;
}

.listing-grid__item {
    box-sizing: border-box;
    border-right: 1px solid rgba(41, 57, 81, 0.15);
    border-bottom: 1px solid rgba(41, 57, 81, 0.15);
    padding: 15px;
}

.listing-grid__item:nth-child(1), .listing-grid__item:nth-child(2), .listing-grid__item:nth-child(3), .listing-grid__item:nth-child(4) {
    border-top: 1px solid rgba(41, 57, 81, 0.15);
}
.listing-grid__item:first-child, .listing-grid__item:nth-child(4n+1) {
    border-left: 1px solid rgba(41, 57, 81, 0.15);
}

<div class="listing-grid">
    <div class="listing-grid__item"></div>
    <div class="listing-grid__item"></div>
    <div class="listing-grid__item"></div>
    <div class="listing-grid__item"></div>
    <div class="listing-grid__item"></div>
    <div class="listing-grid__item"></div>
</div>

Answer 10

这是不可能的，而是简单地通过级联设置边框：这会影响文本和div的位置。

.grids {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: #222;
  height: 326px;
  width: 455px;
  color: white
}

.grids > div {
  border: 4px red solid
}

<div class="grids">

  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  
</div>

使用轮廓，位置不变：

.grids {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: #222;
  height: 326px;
  width: 455px;
  color: white
}

.grids > div {
  outline: 4px red solid;
}

<div class="grids">

  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  
</div>

Answer 11

是的，您可以使用背景更改颜色。在容器内创建一个容器，将其放置在网格列中！

body{
  background-image: url(../image.jpg);
  background-repeat: no-repeat;
  font-size: 30px;
  color: white;
  margin-top: 100px;

}

.wrapper{
  display: grid;
  grid-template-columns: 3fr 1fr;
  background: white;
  grid-gap: 3px ;
  width: 70%;
  margin: auto;
  border-radius: 8px;
}

.header{
  background: rgb(136, 47, 123);
  height: 100px;
  grid-column: 1/3;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.main{
  background: rgb(213, 196, 110);
  min-height: 400px;

}
.sidebar{
  background: rgb(191, 224, 12);
  min-height: 400px;

}
.footer{
  background: rgb(20, 97, 235);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  grid-column: 1/3;
  height: 200px;
}

  <body>
      <div class="wrapper">
        <div class="header">header</div>
        <div class="main">main</div>
        <div class="sidebar">sidebar</div>
        <div class="footer">footer</div>
      </div>
  </body>

enter image description here

Answer 12

您还可以选择忽略网格间隙并使用基础div上的边框，如下所示：

CSS：

.grid {
  display: inline-grid;
  border: red solid;
  width: 200px;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.grid div {
  border: red solid;
}

和HTML：

<div className="grid">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
</div>

我相信这可以达到您想要实现的目标：

Answer 13

有一种解决方法：在每列中使用伪 :after 或 :before 将背景颜色应用于网格间隙。

.grid-column::after {
          position: absolute;
          right: -20px; // grid-gap
          top: 0;
          height: 102px; // grid row height
          width: 20px; // grid-gap
          display: block;
          content: '';
          background-color: black !important;
}

CSS网格：是否可以将颜色应用于网格间隙？

13 个答案: