XF 2.1 How to use :last-child for grid

[SyTry]

Hello,

Actually I'm making an add-on for XenForo 2.1, I have a page to show my partnerships like this :


The problem is the width for the last grid, I want it to be 100% or I want to show my partnerships like this :

Partner 1	Partner 2
Partner 3	Partner 4
Partner 5	Partner 6

This is my HTML :

<div class="stPartnerList">
    My HTML here
</div

And my CSS :

.stPartnerList {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    grid-gap: 10px;
    padding: 10px;

    &:last-child {
        grid-template-columns: 100%;
    }
}

Also tried .stPartnerList:last-child {} but nothing to do
If anyone have an idea or a solution, please let me know !

Regards, SyTry

 

[nocte]

Never worked with grid, but I assume you can do that with flex - with better browser support.

CSS Flexbox (Flexible Box)

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[SyTry]

Never worked with grid, but I assume you can do that with flex - with better browser support.

CSS Flexbox (Flexible Box)

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Thank you for the tip, this site is very cool ! But I can't find a solution, the last column doesn't want to take 100%.

EDIT : got it, not what I want but I changed this grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) ); to grid-template-columns: auto;

 

[nocte]

Again, I'd recommend flexbox

Here's a good example:

Filling the Space in the Last Row with Flexbox | CSS-Tricks

Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those

css-tricks.com

I assume that's exactly what you want.

 

[SyTry]

Again, I'd recommend flexbox

Here's a good example:

Filling the Space in the Last Row with Flexbox | CSS-Tricks

Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those

css-tricks.com

I assume that's exactly what you want.

Nice, thank you. I will add this to my bookmarks !