Formatting empty cells in a CSS grid

Question

If I'm making a grid with a fixed size, with some cells/areas populated, is there a way to format the implicit empty cells? Or do I have to add <div>s for each cell?

.container {
  display: grid;
  grid-template-rows: repeat(3, 20px);
  grid-template-columns: repeat(3, 20px);
  gap: 1px;
}

.container>div {
  background-color: #DDE;
  outline: 1px #11E solid;
  text-align: center;
}

<p>Minimal HTML:</p>
<div class="container">
  <div style="grid-column: 1;     grid-row: 1;">A</div>
  <div style="grid-column: 2 / 4; grid-row: 2;">B</div>
  <div style="grid-column: 3;     grid-row: 3;">C</div>
</div>
<p>With explicit empty divs to create desired appearance:</p>
<div class="container">
  <div style="grid-column: 1;     grid-row: 1;">A</div>
  <div style="grid-column: 2 / 4; grid-row: 2;">B</div>
  <div style="grid-column: 3;     grid-row: 3;">C</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Are you trying to style the empty grid cells that are created implicitly by the grid container, or do you want to have more control over those cells such as applying specific content or behavior? Also, is your grid defined with explicit rows and columns, or are some dimensions being generated implicitly by the browser? — Vladislav Savenkov
– Vladislav Savenkov, Commented Aug 24 at 17:22
@VladislavSavenkov I want to style the empty grid cells - and the grid is statically defined. I'm emulating a printed railway timetable here! — Jack Deeth
– Jack Deeth, Commented Aug 24 at 19:20

A Haworth · Accepted Answer · 2025-08-24 20:50:34Z

If you just want to outline the empty cells and give them a background color the same as the other cells you can do this by giving both the container and each filled div the background color and draw the grid lines with a repeating background image (linear gradients) on the container.

Here's a simple example:

<style>
  .container {
    display: grid;
    grid-template-rows: repeat(3, 20px);
    grid-template-columns: repeat(3, 20px);
    gap: 1px;
    width: fit-content;
    background-image: linear-gradient(#11E 0 1px, transparent 1px 100%), linear-gradient(to right, #11E 0 1px, transparent 1px 100%);
    background-repeat: repeat;
    background-position: left top;
    background-size: 100% 21px, 21px 100%;
    background-color: #DDE;
    width: fit-content;
    padding: 1px;
  }

  .container>div {
    text-align: center;
    background-color: #DDE;
  }
</style>
<div class="container">
  <div style="grid-column: 1;     grid-row: 1;">A</div>
  <div style="grid-column: 2 / 4; grid-row: 2;">B</div>
  <div style="grid-column: 3;     grid-row: 3;">C</div>
</div>
<br>
<div class="container">
  <div style="grid-column: 1;     grid-row: 1;">A</div>
  <div style="grid-column: 2 / 4; grid-row: 2;">B</div>
  <div style="grid-column: 3;     grid-row: 3;">C</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Collectives™ on Stack Overflow

Formatting empty cells in a CSS grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related