appjeniksaan Posts - Answer Overflow

appjeniksaan

•Created by appjeniksaan on 3/6/2024 in #front-end

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

For work, I needed some table styling and decided to use CSS Grid. Because I need even/odd row styling, I used subgrid. When searching online I couldn't find many solutions going this direction. I wrote a short post about it: https://appjeniksaan.nl/posts/table-row-styling-with-css-grid/

<div class="table">
  <div class="row">
    <div>Programming Language</div>
    <div>Creator</div>
    <div>First Release</div>
  </div>
  <div class="row">
    <div>C</div>
    <div>Dennis Ritchie</div>
    <div>1972</div>    
  </div>
  <!-- [...additional rows] -->
</div>

<div class="table">
  <div class="row">
    <div>Programming Language</div>
    <div>Creator</div>
    <div>First Release</div>
  </div>
  <div class="row">
    <div>C</div>
    <div>Dennis Ritchie</div>
    <div>1972</div>    
  </div>
  <!-- [...additional rows] -->
</div>

.table {
  display: grid; 
  grid-template-columns: repeat(3, 1fr); /* 3 columns of even width */
}
.row {
  display: grid; 
  grid-template-columns: subgrid; /* Every row is a subgrid */
  grid-column: 1 / -1; /* Spans from the first to the last column */
}
.row:first-of-type {
  font-weight: bold;
}
.row:nth-of-type(even) {
  background-color: white; /* Even rows get alternative background-color */
}

.table {
  display: grid; 
  grid-template-columns: repeat(3, 1fr); /* 3 columns of even width */
}
.row {
  display: grid; 
  grid-template-columns: subgrid; /* Every row is a subgrid */
  grid-column: 1 / -1; /* Spans from the first to the last column */
}
.row:first-of-type {
  font-weight: bold;
}
.row:nth-of-type(even) {
  background-color: white; /* Even rows get alternative background-color */
}

But now I am wondering, are there any disadvantages to styling it this way that I am overlooking? Or is the fact that subgrid is relatively new the reason that there aren't many descriptions for this solution? Btw, I know that this is technically already a solved problem, since the code above works. But if there are some disadvantages to it that I am overlooking, or a solution that would be even better, I would really like to know about them.

17 replies

Gaming

Programming