• 2020-08-01

    Select row with grid

    Author

    Jens Törnell

    Comments

    Start a discussion

    It's not as simple as it seems to select a row with CSS grid.

    To make it possible, an invisible element needs to be created as a wrapper.

    Full page 

    <div class="wrap">
  <div class="item">1</div>
  <div class="item">2</div>

  <div class="row-wrap">
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <div class="item">5</div>
  <div class="item">6</div>
</div>
    .row-wrap {
  display: contents;
}

    When using display: contents; the element is no longer visible on the page. It can still be styled with CSS.

    Sources