• 2020-08-01

    Select row with grid

    Author

    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.

    <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