Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago
Catogram

Specify Which CSS Grid Wraps First

I have two grids contained inside each other, as shown in this codepen. Effectively, I want it to break the outer grid first, so that I have two lines with groups of two, rather than breaking into groups of two vertically before breaking into lines in the outer grid.

<div class="menu-grid">
    <div class="menu-item select-border">
      <span>User</span><span>Stat</span>
    </div>
    <div class="menu-item date-border">
      <span>Date1</span><span>Date2</span>
    </div>
  </div>


.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}

.select-border {
  background-color: gray;
  border-radius: 20px;
}

.menu-item {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


In other words, currently there is a breakpoint that looks like this:

User | Date1
Stat | Date2


Instead, I want it to change straight between these two states:
User Stat | Date1 Date2


User  | Stat
Date1 | Date2


I could make a media query, but I'm wondering if there's a simpler way to do it with grid.
Was this page helpful?