CSS Grid Scale Calibration

Question

I have a CSS grid that takes up 100% of the width and 100% of the height of the window (the body element has display: grid; ). The grid has row and column patterns and elements that occupy 100% of the allocated space. However, when I add a grid-gap to the grid, this makes the grid too large for the window, causing scroll bars to appear. How can I stop the grid-gap from adding to the grid sizes - similar to box-sizing: border-box; stop adding padding to item sizes? Instead, I want spaces to cut mesh cells.

Thanks.

Answer 1

It works just as if you were using box-sizing: border-box and the add-on, as you can see in this demo. The height is set to 100vh, and you can see that if you delete or add a grid-gap , there is no scroll bar, you just need to remove the field from the body.

 body { margin: 0; } .grid { display: grid; height: 100vh; grid-gap: 20px; background: #FF7D7D; grid-template-columns: 1fr 2fr; } .grid > div { background: black; color: white; } div.a, div.d { color: black; background: white; } 

 <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> </div> 

Answer 2

When you use "fr", it works.

 <section> <article class="a">A</article> <article class="b">B</article> <article class="c">C</article> <article class="d">D</article> </section> section { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-gap: 20px; border: 10px solid blue; article { background-color: tomato; &.d { grid-column: 2; grid-row-start: 1; grid-row-end: 4; background-color: olive; } } } 

Answer 3

You can use view units:

• vw (1% of window width)
• vh (1% of window height)

 * { margin: 0; padding: 0; box-sizing: border-box; height: 100%; } .first { height: 40vh; } .hori { height: 10vh; } .second { height: 50vh; } div > div { float: left; } .left { width: 40vw; } .vert { width: 10vw } .right { width: 50vw; } .first .left, .second .right { background: #ccc; } .first .right, .second .left { background: #000; } 

 <div class="first"> <div class="left"></div> <div class="grid-break vert"></div> <div class="right"></div> </div> <div class="grid-break hori"></div> <div class="second"> <div class="left"></div> <div class="grid-break vert"></div> <div class="right"></div> </div>