Kevin Powell - Community•10mo ago

How to straighten these rows?

I have cards with rows of data that may have variable length text. Right now, each div within a row, within a card, is independent from the other divs on the same row but in a different card. How do I make these grow to the tallest div in each row? https://codepen.io/Jason-Cabreros-the-sasster/pen/NWJwxWR

6 Replies

MarkBoots•10mo ago

you can use subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1/7;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1/7;
  text-align: center;
}

MarkBoots•10mo ago

SchmediumXL•10mo ago

Ah, thanks! I haven't learned about subgrid yet but will look into it now.

ishto•10mo ago

If you havent seen it: https://www.youtube.com/watch?v=Zddz_R1RnfM&ab_channel=KevinPowell

Kevin Powell

YouTube

Subgrid & Container Queries change how we can create layouts

https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=containersubgrid 👈 Looking to get better at CSS? I’ve got a range of courses, including several free ones! Container queries and subgrid are now both supported in all evergreen browsers, which is super exciting, and as a bonus, they can work really well together! ...

SchmediumXL•10mo ago

Thanks, I just watched it. Will probably need to watch it a couple of times to understand what's going on since now I I'm stuck overriding subgrid with a media query for mobile. Before I could just do the 1fr on the grid itself but that doesn't seem to be working now that there's a subgrid in my layout.

clevermissfox•10mo ago

Subgrid uses the same grid as the parent so you’ll need to adjust the main grid in your media query and then adjust the grid-areas and how they span(how you arrange them on the main grid)

Gaming

Programming

How to straighten these rows?