All geek questions in one place

Grid column break causes overflow

I just checked CSS display: grid . It works well, but grid-column-gap: 10px; breaks the parent container. The green area in my code below is less than the grid area.

box-sizing: border-box; apparently no effect.

How to make grid area and parent container equal width?

 /* ------------------------------- Resets --------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: block; } a img {border: 0;} /* Selection colours (easy to forget) */ ::selection {background: rgba(11, 161, 226,0.5);} ::-moz-selection {background: rgba(11, 161, 226,0.5);} img::selection {background: transparent;} img::-moz-selection {background: transparent;} body {-webkit-tap-highlight-color: rgba(11, 161, 226,0.5);} html, body { height:100%; } #content { width:600px; height:100vh; margin:0 auto; box-sizing: border-box; } .gritts { height:100vh; display: grid; grid-template-rows:1fr 2fr 1fr; grid-template-columns:15% 25% 35% 25%; grid-auto-flow: dense; grid-row-gap: 10px; grid-column-gap: 10px; background-color: rgb(0,230,0); box-sizing: border-box; align-items:stretch; } .box { box-sizing: border-box; color:white; font-size:30px; position:relative; overflow:auto; } .box-1 { background-color: rgba(0,50,240,0.7); grid-column:4/5; grid-row:2/3; z-index: 11; } .box-1 h1 { position:absolute; top:100px; right:100px; } .box-2 { background-color: rgba(0,120,240,0.7); } .box-3 { background-color: rgba(200,120,240,0.7); } .box-4 { background-color: rgba(80,120,80,0.7); } .box-5 { background-color: rgba(150,120,150,0.7); } .box-6 { background-color: rgba(100,160,240,0.7); } .box-7 { background-color: rgba(0,50,240,0.7); } .box-8 { background-color: rgba(200,50,240,0.7); } .box-9 { background-color: rgba(180,150,240,0.7); grid-column:2 / span 2; grid-row:2/ span 2; z-index: 10; } .box-10 { background-color: rgba(100,50,40,0.7); } .box-11 { background-color: rgba(0,250,40,0.7); } .box-12 { background-color: rgba(100,250,240,0.7); } 
 <body id="pageUid-1" class="pagePid-0"> <header id="header"></header> <main id="content"> <section class="gritts"> <div class="box box-1"> <h1>1</h1> </div> <div class="box box-2"><h1>2</h1></div> <div class="box box-3"><h1>3</h1></div> <div class="box box-4"><h1>4</h1></div> <div class="box box-5"><h1>5</h1></div> <div class="box box-6"><h1>6</h1></div> <div class="box box-7"><h1>7</h1></div> <div class="box box-8"><h1>8</h1></div> <div class="box box-9"> <h1>9</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p> <p>Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.</p> <p>Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p> <p>Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.</p> <p>Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.</p> </div> </section> </main> <footer id="footer"></footer> </body>
+5
source share
1 answer

You have columns installed that occupy 100% of the width of the container:

 .gritts { display: grid; grid-template-columns: 15% 25% 35% 25%; grid-column-gap: 10px; }

This gives you four columns with three columned gutters.

With each gutter receiving 10px, you get 100% + 30px , which leads to overflow.

box-sizing: border-box will not help, since it only applies to width , height , min-width/height / max-width/height and flex-basis ( source ).

Instead, try something like this:

 grid-template-columns: 15% 25% calc(35% - 30px) 25%;

modified demo

or that:

 grid-template-columns: 15% 25% 1fr 25%;

modified demo

+3
source

Source: https://habr.com/ru/post/1270547/

More articles:


All Articles