Kevin Powell - Community•14mo ago

Align cards items in defined grid

Hey, another day is here and I have another challenge for you: Imagine I have a grid defined, and inside that grid are cards (flexboxes) 🃏. I need to align the title, the icon, and the list of text - and the way I always have the title and the first line of the list aligned. And I don't know the height of the box, it's dynamic, based on the number of rows in the list. Space between is probably not usable, because I can have a sheet with different number of items, and they should always be at the title.

10 Replies

MarkBoots•14mo ago

best solution: subgrid. It's supported by most browsers now, but only just. so maybe a bit too early for production if you can provide us some sample html in a codepen, we could play with it

Igor MilenkovicOP•14mo ago

I will really need a solution that will be supported by most browsers. It looks pretty simple, I'm probably missing something, but I'm not sure what. think

There is a codepen link: https://codepen.io/imilenig/pen/RwvVRKE?editors=1100

MarkBoots•14mo ago

well the most browser do support it (but 80% is probably not enough) with your current setup, i came up with this

.title-wrapper {
  display: grid;
  grid-template-rows: 1.5rem 1fr;
}
.tag-above-title {
  color: red;
  align-self: center;
}
h2.title {
  height: 85px;
  overflow: hidden;
  margin: 0;
  grid-row: 2;
}

.title-wrapper {
  display: grid;
  grid-template-rows: 1.5rem 1fr;
}
.tag-above-title {
  color: red;
  align-self: center;
}
h2.title {
  height: 85px;
  overflow: hidden;
  margin: 0;
  grid-row: 2;
}

I made the title-wrapper a 2 row grid. and make sure the title comes in the second row. (for if there is no tag). but it does need a magic number for the tag row ohw, but now i notice you used a set height on the h2. have to see if we can get rid of that (unless you want it to cut off) btw, your html does not match your screenshots and description. There is no icon and you didn't mention the tag

Caio Marcellus•14mo ago

I am not sure I understand what you want, Igor

Igor MilenkovicOP•14mo ago

That's the problem I'm having right now - it means I'm generating tag-above-title even if the tag doesn't exist, and I have a fixed height. The issue is space between image and title, on the line when there is no tag

MarkBoots•14mo ago

this would be possible with sub-grid https://codepen.io/MarkBoots/pen/OJdmXEP

Caio Marcellus•14mo ago

First thing, the space for new should always be there. I would add a height to that and a height for the title as well, foreseeing a height of three lines But yeah, subgrid is the best option

Igor MilenkovicOP•14mo ago

That's actually the problem - I don't want to display the space when there is no tag on any of the cards in the row.

MarkBoots•14mo ago

yea it's not that simple as you might think

Caio Marcellus•14mo ago

So, when there is no new, you want the titles no to be aligned?

Gaming

Programming

Align cards items in defined grid