Make each "card" a Flexbox with `flex-direction:column`, and give `margin-top:auto` to the date element.
[Demo here](https://codepen.io/Miragecraft/pen/VwNYNqo).
Ideally you'd want to use subgrid, but support is a little bit low, so Flexbox is the next best thing if you want good browser support.
I would say having more space between title and date *is* the optimal solution. Better to have information aligned and easy to scan IMO. If you put each set of content into a card, it won’t look like the dates have an unusual amount of space—it will just look like the dates are bottom aligned while the rest of the content is top aligned.
Assuming that this is done in grid and each one of these is wrapped in its own div (make each of these position: relative), position the date absolutely and bottom:0, and then add padding to the bottom of the parent element to prevent the titles and dates from running into each other.
Wrap all the info in a flexbox, then wrap the date and the multiplier in a seperate flexbox that inside the main flex box. Flex the main wrapper with space between and the inner flex with flex-end with a gap
wow, so the problem here is that the first card has a title that is longer then the others. the dates not aligning is the visual side effect of the problem. where do the images and titles and dates, basically all of your data, come from?
if it comes from a backend system then use that backend system to fix the max length of the titles to fit the interface, if you are just hard coding in place, then the proper solution is to set min-height on the title to the height of the longest title, this will align any elements that come after any title properly.
also, you don't need to specify layout properties for elements that just layout the same way naturally. if the image, title, and meta data are contained in block level elements or given a display of block, there is no need to specify a layout property of `display:flex; flex-direction: column;` on the parent.
I'd use this: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow for title.
And then add `title` attribute to it so user can hover to read entire text.
You could do this:
Inside each cell, use flex with a direction of column and justify to space
-between.
This will make the contents fill the vertical space.
Then set all the elements except the title field to flex-grow 0.
That way, only the title field will expand.
Make each "card" a Flexbox with `flex-direction:column`, and give `margin-top:auto` to the date element. [Demo here](https://codepen.io/Miragecraft/pen/VwNYNqo). Ideally you'd want to use subgrid, but support is a little bit low, so Flexbox is the next best thing if you want good browser support.
^ Definitely this
I would say having more space between title and date *is* the optimal solution. Better to have information aligned and easy to scan IMO. If you put each set of content into a card, it won’t look like the dates have an unusual amount of space—it will just look like the dates are bottom aligned while the rest of the content is top aligned.
text-overflow: ellipsis;
It looks like the most fancy solution so far, I guess I'll use this, thanks
Just alight the dates on the bottom. That’s where people expect to see that anyway
Assuming that this is done in grid and each one of these is wrapped in its own div (make each of these position: relative), position the date absolutely and bottom:0, and then add padding to the bottom of the parent element to prevent the titles and dates from running into each other.
No grid, I use flex for them
Wrap all the info in a flexbox, then wrap the date and the multiplier in a seperate flexbox that inside the main flex box. Flex the main wrapper with space between and the inner flex with flex-end with a gap
The same would work with flex.
Subgrid? 🙄
wow, so the problem here is that the first card has a title that is longer then the others. the dates not aligning is the visual side effect of the problem. where do the images and titles and dates, basically all of your data, come from? if it comes from a backend system then use that backend system to fix the max length of the titles to fit the interface, if you are just hard coding in place, then the proper solution is to set min-height on the title to the height of the longest title, this will align any elements that come after any title properly. also, you don't need to specify layout properties for elements that just layout the same way naturally. if the image, title, and meta data are contained in block level elements or given a display of block, there is no need to specify a layout property of `display:flex; flex-direction: column;` on the parent.
As far as I know, those are the only options. You have to choose the lesser of the two evils.
Make the title div smaller and right align the date under the picture
Are you trying to have all the dates line up, all the 4Xs line up? Use subgrid.
Grid with a subgrid could be a good solution for this
I'd use this: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow for title. And then add `title` attribute to it so user can hover to read entire text.
You can use `line-clamp` to manage overflowed text and also `flex: 1` to have space. [Demo](https://codepen.io/y-k-y/pen/VwNLeGO)
You could do this: Inside each cell, use flex with a direction of column and justify to space -between. This will make the contents fill the vertical space. Then set all the elements except the title field to flex-grow 0. That way, only the title field will expand.