Grid element column and rows calc

[The_Capture_Factory]

Hi
I have been building a grid element based on 100vw. my grid uses repeat(8,calc(100vw/8)) as the column and row layout values. This is fine if i have both gap width and gap height to zero. I would like to introduce a 5px gap between cells but this then pushes the cells outside the width of the view window. To compensate for this i decided to remove 40px from the calculation to account for 5x8px created by the gaps. I attempted to use the following repeat(8,calc((100vw-40px)/8)) which didn’t work so i tried repeat(8,calc(100vw-40px/8)). Can you advise how i should adjust the calculation to remove the 40px added to the grid by the gap width.

many thanks
Richard

[ruenel]

Hello Richard,

Thanks for writing in!

If you use Calc() function, it will give you fix value. 100 browser width divided by 8 is equal to at least 12.5vw. There is no longer space for gaps. If you add gaps in it, it would become like this:

calc(100vw/8) = 12.5vw

12.5vw needs (7 x 5px) therefore, the actual width would be 100vw plus 35 pixels            

I would highly recommend that you use minmax() function instead:
repeat(8,minmax(10vw, 12vw))

This would display 8 cells with a minimum width of 10vw and a maximum width of 12vw which will give space for the gap. And by the way, if you have Section / Row / Column / Gap element structure, you will need to set the Global Container of the Grid and Row element to 100%.

Best Regards.

For more details, you can check this out:

• https://ishadeed.com/article/css-grid-minmax/