[Resolved] CSS Grid, 100% Height and force-to-bottom

[Mat]

Hello

Ordinarily, when I’ve needed to use this, the last component inside a Grid ‘column’ has been a button, so the CSS outlined in this thread has always worked.

I’m working on something now that has a container as the final component. First ‘line’ inside Container is a Headline, then below that is another (nested) Container that has 7 Headlines in it, all set to Inline Width (the first 5 are just using small SVGs with ‘Remove Text’ set on them).

The problem, then, with the CSS in the linked thread, is that it removes the Inline Width display and simply stacks all 7 of the headlines vertically due to the flex-direction: column setting.

Question, then, is how do I have the 100% height functionality so that all Grid columns are the same height (without losing the inline-width), but have the last-child effectively be a Container and the contents of the Container, so that everything in the last container is pushed down to the bottom because the last Container is being pushed down to the bottom?

I hope I’ve managed to explain that?

Thanks,

Mat

[Ying]

Hi Mat,

The problem, then, with the CSS in the linked thread, is that it removes the Inline Width display and simply stacks all 7 of the headlines vertically due to the flex-direction: column setting.

You can wrap the headlines with a container block.

For the other issues, I would have to see the site.
Let me know!

[Mat]

Hello

Have put link to bypass maintenance mode in Private Information.

The headlines are wrapped with a container block.

The first example of 4 columns shows, in the third column, that the heights are not even. This is standard and I have not applied class flex-align to the grid. The Container with all the content in it that I would like to be forced to bottom has the additional class of this-container-to-bottom applied.

As you can see in the second example, using the CSS from the example post means the inline-width is broken and that, effectively, all the contents are forced to bottom align.

I hope this is clearer!

Thanks

[Ying]

1. Add a CSS class to the container block which contains the stars, eg. stars
2. add this CSS:

.gb-container.stars >.gb-inside-container {
    flex-direction: row;
}

3. You currently only have 2 containers in the Grid container, 1 for image, and 1 for the rest.
Change structure to 3 containers, 1 for image, 1 for text, 1 for stars.

[Mat]

Thanks very much Ying, now all working. Breaking out the nested Container worked out fine, and the flex-direction override rule should have been obvious to me!

Needed to add some extra Margin rules to stop the top label strip from being forced down.

Truly surprised by how much everyday design assistance you all offer – this is not GP/GB specific stuff, just everyday CSS & HTML and there’s really no reason to expect your support to come anywhere near it, yet here you are, doing it every day. Most appreciated.

[Ying]

Hi Mat,

It’s really our pleasure to help our users to achieve their design goals.
Although we can not provide full customization solutions, we try our best to point our users in the right direction 🙂

[Author]

Posts