XF 2.0 while working with grid / is not working

[hemant_bhardwaj]

hey, i were woking on wigtdet template and i applied css grid in extra.less

css that i enter:

    .tour_warr {
    display: grid;
    grid-template-columns: 0fr 1fr 1fr 0fr;
    grid-gap: 10px;
    height: 396px;
}
   
    .tour_warr :nth-child(2) {
    grid-column: 3/span 1;
}
    .tour_warr div {
    background-color: red;
}
    .tour_warr :nth-child(3) {
    grid-column: 3/span 1;
}
    .tour_warr :first-child {
      grid-column: 1/span 2;
    grid-row: 1/span 2;
}

but it's seem not working

then i saw there is no / in between 1 and span. but when i see extra.less code looks fine.

 

[hemant_bhardwaj]

@Ehren brother any solution from your side ? @Mike Creuzer brother i saw span grid in xpress and it was working there but not in my client forum.

 

[Ehren]

That's because less is trying to divide the values which technically doesn't make sense. Use this instead:

.tour_warr :nth-child(2) {
    grid-column: ~"3 / span 1";
}

I would also advise against the height property since that can cause issues if the amount of content exceeds the amount you'd expect (such as long titles or descriptions). Using min-height or avoiding it altogether if possible is the best solution.

 

[hemant_bhardwaj]

That's because less is trying to divide the values which technically doesn't make sense. Use this instead:

.tour_warr :nth-child(2) {
    grid-column: ~"3 / span 1";
}

I would also advise against the height property since that can cause issues if the amount of content exceeds the amount you'd expect (such as long titles or descriptions). Using min-height or avoiding it altogether if possible is the best solution.

thanks brother it's work. this is annoying can be a bug? because extra.less is only for css not for the calculation.
but anyway thanks for the help

 

[Ehren]

It's not a bug. That's just how less handles slashes.

 

[S Thomas]

thanks brother it's work. this is annoying can be a bug? because extra.less is only for css not for the calculation.
but anyway thanks for the help

?
https://developer.mozilla.org/en-US/docs/Web/CSS/calc

 

[hemant_bhardwaj]

?
https://developer.mozilla.org/en-US/docs/Web/CSS/calc

It's not a bug. That's just how less handles slashes.

Thanks for the help i didn't notice that .mostly i use calc but some how i ignore that / sorry