【问题标题】:CSS Grid: Is it possible to apply color to grid gaps?CSS Grid:是否可以将颜色应用于网格间隙?
【发布时间】:2018-02-03 16:40:21
【问题描述】:

有没有办法在 CSS 网格布局模块中设置不仅仅是网格间隙宽度的样式?我在文档中找不到任何关于它的信息,但是人们倾向于认为这是可能的,因为在许多设计中网格间隙往往会被着色。如果不可行,是否有解决方法?

【问题讨论】:

  • 网格容器上的背景颜色怎么样?
  • 另外,请发布工作代码,以便我们重现问题。
  • @Michael_B 重现没有问题;那不是我问的。在我跳入并将自己编码到一个角落之前,我正在尝试制定解决方案。我编辑了问题以包含布局的屏幕截图。
  • Michael_B 要求提供用于创建布局的现有 HTML 和 CSS。但是,如果它只是一个包含所有必需品的平面网格,那么您的问题应该是不言自明的。
  • 很遗憾,没有,但我发现一个不错的解决方法是设置网格内元素的 background-color 并使用这些元素的 padding-bottompadding-right 分隔它们

标签: css css-grid


【解决方案1】:

有一种解决方法:在每列中使用伪 :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;
}

【讨论】:

    【解决方案2】:

    您也可以选择省略网格间隙并使用底层 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>
    

    我相信这可以实现您想要实现的目标:

    【讨论】:

      【解决方案3】:

      这是不可能的,只需在级联中设置边框即可: 这会影响文本和 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>

      【讨论】:

        【解决方案4】:

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

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

        【讨论】:

          【解决方案5】:

          我将边框颜色作为背景颜色添加到网格中,并为所有网格项添加背景颜色。

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

          这对我有用。

          【讨论】:

            【解决方案6】:

            而不是使用solution above,我建议将border 与伪类一起使用,因为如果您有不规则数量的“表格单元格”,您最终会在“表格”的末尾出现一个丑陋的彩色填充单元格”。

            如果您想在“表格单元格”之间使用边框并且您的单元格数量并不总是相同,您可以执行以下操作(此示例也适用于 flexbox):

            .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;
            }
            <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>

            【讨论】:

              【解决方案7】:

              遗憾的是,目前 CSS 网格规范中没有办法设置 grid-gap 的样式。我想出了一个效果很好的解决方案,尽管它只涉及 html 和 css:show border grid lines only between elements

              【讨论】:

                【解决方案8】:

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

                您可以这样做,但网格边框不会像使用 border-collapse 属性的表格边框那样折叠,并且与网格间隙不同,它们将与内部边框一起应用于网格的周边,这可能不需要。另外,如果您有 grid-gap 声明,则这些间隙将分隔您的网格项目边框,就像 border-collapse: separate 对表格边框所做的那样。

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

                【讨论】:

                • 在我看来,一种设置网格线样式的方法,就像使用文本列分隔符一样,将是一个很好的补充。我采用的解决方案是简单地填充充满自动放置空 div 的网格,并带有右边框和下边框。从视觉上看,这是一个完美的解决方案,但是查看 html 并看到 22 个空 div 令人讨厌。
                猜你喜欢
                • 1970-01-01
                • 2015-01-11
                • 1970-01-01
                • 2012-09-29
                • 1970-01-01
                • 1970-01-01
                • 2018-05-07
                • 1970-01-01
                • 2020-12-03
                相关资源
                最近更新 更多