Can you set a part of a grid card entry to be at the bottom?

[Andre601]

I currently use the grid cards setup with the Div-object aproach and now would like to have the last paragraph of a card to be aligned vertically at the very bottom.

As an example, imagine the following grid cards:

I now would like that "Some Link" is at the same vertical height as "Other Link", maybe even pair it with other elements like a horizontal rule above the link for separation.
What options, if any, are there that I could try?

[kamilkrzyskow]

Hello @Andre601,
I'm no CSS expert, but I played a bit with display flex and managed to find a "solution" to your query:

https://squidfunk.github.io/mkdocs-material/customization/#additional-css

firefox_euOVCGuuti.mp4

.md-typeset .grid.cards > ul > li {
	display: flex;
	flex-direction: column;
	outline: 1px solid green;
}
.grid.cards li p:last-child {
        display: flex;
	flex-grow: 5; /* Probably 2 would be enough, as the grids shouldn't hold too much text to begin with, but to be safe I set it to 5 */
	outline: 1px solid red;	
}
.grid.cards li p:last-child a {
	align-self: flex-end;
}

There is a slight increase in the gap around the <hr> line at the top, and I don't think I can prevent it with this setup 🤔
I hope this is a valid approach ✌️

[Andre601]

That works perfectly, thank you.

[Andre601]

I'm back with another situation similar to the one I had before.

The difference here is, that instead of a single link, I want to have an unordered list be put at the bottom of a flex entry.

Here is the markdown:

<!-- "hide-list" is used in CSS to hide the dots of nested unordered lists -->
<div class="grid cards hide-list" markdown>

-   ## Example 1
    
    Lorem Ipsum dolor.
    
    - [Another page](https://example.com/another-page)
    - [More](https://example.com)

-   ## Example 2
    
    - [Link](https://link.example.com)

</div>

Using this with the following CSS:

.md-typeset .grid.cards.hide-list > ul > li > ul > li {
    list-style-type: none;
}

.md-typeset .grid.cards.hide-list > ul > li {
    display: flex;
    flex-direction: column;
}

.md-typeset .grid.cards.hide-list > ul > li > ul {
    flex-grow: 2;
    display: flex;
}


.md-typeset .grid.cards.hide-list > ul > li > ul > li {
    align-self: flex-end;
}

...gives me this output:

I tried to do different variations here (Applying attributes flex-grow, display and align-self to different parts) but no real luck here...

What would I need to modify to get a similar outcome to the other situation?

[Andre601]

Also the .hide-list seems to be unnecessary, as you can just set:

Not if you only want them hidden in certain grid cards and not just all...

[Andre601]

Also, there is no p tag for a <ul>, so the p:last-child wouldn't work here.

[Andre601]

And as a final note, I believe the suggestion you gave me in the past only really applies to one single <a> object and not multiple.
Because having multiple <a> objects gives me the same output as I have right now with the <ul>, which after some testing I can blame on the lack of flex-direction: column in the p object itself.

[kamilkrzyskow]

I believe the suggestion you gave me in the past only really applies to one single object and not multiple.

Yes, the solution I provided is very rigid for a specific use case described in the docs of the theme.
One title, one hr line, one paragraph with content, one paragraph with a link per card.
Even then, adding flex display slightly modifies the gap between the title and the hr line, so it's not perfect.

Any other setup needs further customization.

Also, there is no p tag for a

Oh, I didn't anticipate that.

flex-direction: column with 2 links could perhaps help with the situation, but then you shouldn't use a list 🤔
If you could provide an example zip with the not working css, I could try making it work, but still it would be configured to work with only that one specific setup of a list / two links.

[Andre601]

Yeah, don't waste your time on this... I simply give up on that one, instead of wasting both our times on this any further.

It's a small visual thing anyways and won't bother anyone in the end, so nothing big is lost here.