Catogram
Catogram
PostsComments
KPCKevin Powell - Community
Created by Catogram on 8/11/2023 in #front-end
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>
<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));
}
.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
User | Date1
Stat | Date2
Instead, I want it to change straight between these two states: 
User Stat | Date1 Date2
User Stat | Date1 Date2
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.
1 replies