KPC
Kevin Powell - Community•4w ago
Dev_HK

how to tell on grid break; the last element take full grid col

.our-packs-grid{
    width: clamp(calc(64rem - 4rem),70vw,80rem);
    margin-inline: auto;
    margin-block: 2rem 0;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit,minmax(20rem,1fr)) !important;
}

@media screen and (max-width:64rem){
    .our-packs-grid{
        width: calc(100% - 4rem) !important;
    }
    .our-packs-item-card:last-child:nth-of-type(2n+1){
        grid-column: 1/-1;
    }
}
.our-packs-item-card {
    position: relative;
    max-width: 100%;
    width: 100%;
}
.our-packs-grid{
    width: clamp(calc(64rem - 4rem),70vw,80rem);
    margin-inline: auto;
    margin-block: 2rem 0;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit,minmax(20rem,1fr)) !important;
}

@media screen and (max-width:64rem){
    .our-packs-grid{
        width: calc(100% - 4rem) !important;
    }
    .our-packs-item-card:last-child:nth-of-type(2n+1){
        grid-column: 1/-1;
    }
}
.our-packs-item-card {
    position: relative;
    max-width: 100%;
    width: 100%;
}
i want the last child that' s oddto take the full columns of the grid columns
No description
No description
2 Replies
Chris Bolson
Chris Bolson•4w ago
As you are using a media query to define the breakpoint, this should work. However you are also using auto-fit on the grid template columns so there will no doubt be some screen widths that still show the 3rd cell only spanning one column. If only want the grid to have 3 columns on larger screens and 2 on smaller screens, seeing as you are using a breakpoint anyway, I would specify that explicitly rather than using the auto-fit value and allowing the browser to do it's own thing. A possibly simpler/clearer way to select the last child only if it is "odd" might be this: 
.our-packs-item-card:last-child:nth-child(odd){
}
.our-packs-item-card:last-child:nth-child(odd){
}
Dev_HK
Dev_HKOP•3w ago
I see 🙏❤️

Did you find this page helpful?