2

When I create a grid using a large enough border-radius property on the grid cells and a gap property, gaps appear at the corners inbetween the elements (the red background).

.grid {
  display: grid;
  grid-template-columns: repeat(3,calc(90vw/3));
  grid-template-rows: repeat(3,calc(90vh/3));
  background-color: red;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1vmin solid black;
  border-radius: 15px;
}
<html>
<body>
  <div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</body>
</html>

How would I go about filling these gaps with the same color as my border?

3 Answers 3

2

Use a gradient coloration:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: linear-gradient(black 0 0) 50%/90% 90% no-repeat;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}

.cell {
  background-color: gray;
  outline: 1vmin solid black;
  border-radius: 15px;
}
<html>

<body>
  <div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</body>

</html>

1
  • This option is also good, If you want to keep it in the middle of the boxes
    – Prem Singh
    Jul 1, 2022 at 10:01
2

You can set background-color of the container to achieve this.

.grid {
  display: grid;
  grid-template-columns: repeat(3,calc(90vw/3));
  grid-template-rows: repeat(3,calc(90vh/3));
  background-color: black;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1vmin solid black;
  border-radius: 15px;
}
<html>
<body>
  <div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</body>
</html>

1
  • Good solution, but is there a way to make it so the container only covers the inner corners and not the outer corners? similar to how it looks on the bottom elements right now
    – rafplayz
    Jul 1, 2022 at 5:49
1

If you change the css, then the design can be a little better.

*, ::after, ::before {
    box-sizing: border-box;
}
        .grid {
        background-color: black;
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    border-radius: 16px;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
    width: 100%;
    min-height: 1px;
  -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
      height:70px;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>

<div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.