CSS Grid: Is it possible to apply color to grid gaps?

问题

Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can't find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in many designs. If it is not possible, is there a workaround?

回答1:

Sadly, there is currently no way in the CSS Grid spec to style grid-gap. I came up with a solution that works well though that involves just html and css: show border grid lines only between elements

回答2:

For instance: if one has a 5x5 grid of squares, is the only way to get colored grid lines to fill the grid with 25 elements and apply borders to those same elements?

You could do that, but grid borders do not collapse the same way that table borders can with the border-collapse property, and unlike grid gaps they'll be applied to the perimeter of your grid along with the inner borders, which may not be desired. Plus, if you have a grid-gap declaration, the gaps will separate your grid item borders much like border-collapse: separate does with table borders.

grid-gap is the idiomatic approach for spacing grid items, but it's not ideal since grid gaps are just that: empty space, not physical boxes. To that end, the only way to color these gaps is to apply a background color to the grid container.

回答3:

Instead to use the solution above I recommend to use border with pseudo-classes because if you have an irregular amount of "table cells" you will end up with an ugly color filled cell at the end of the "table".

If you want to use borders between the "table cells" and you have not always the same amount of cells you can do something like this (this example would also work with 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>

回答4:

I added the border color as a background-color to the grid and added a background color to all grid-items.

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

This works for me.

回答5:

You can use borders instead of grip or just change background color, if that works.

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

Hope it helps!

回答6:

Setting background-color on grid will color your gaps. For example:

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

回答7:

maybe this solution will help you: 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>

回答8:

It has been a while, but I managed to make it work: I put a background on my grid container, and a grid gap of the thickness of the border I want to have, theen I put a background color in my items individually:

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

my 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>`

来源：https://stackoverflow.com/questions/45884630/css-grid-is-it-possible-to-apply-color-to-grid-gaps

标签

css

css-grid