大佬教程收集整理的这篇文章主要介绍了html – grid-column-gap导致溢出，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
box-sizing：border-box;显然没有效果.
如何使网格区域和父容器具有相等的宽度？
/* ------------------------------- 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,figure img,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,0.5);} img::SELEction {BACkground: transparent;} img::-moz-SELEction {BACkground: transparent;} body {-webkit-tap-highlight-color: rgba(11,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,0.7); } .box-3 { BACkground-color: rgba(200,0.7); } .box-4 { BACkground-color: rgba(80,80,0.7); } .box-5 { BACkground-color: rgba(150,150,0.7); } .box-6 { BACkground-color: rgba(100,160,0.7); } .box-7 { BACkground-color: rgba(0,0.7); } .box-8 { BACkground-color: rgba(200,0.7); } .box-9 { BACkground-color: rgba(180,0.7); grid-column:2 / span 2; grid-row:2/ span 2; z-index: 10; } .box-10 { BACkground-color: rgba(100,40,0.7); } .box-11 { BACkground-color: rgba(0,250,0.7); } .box-12 { BACkground-color: rgba(100,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,at ullamcorper erat diam dignissim ante. Pellentesque justo risus.</p> </div> </section> </main> <footer id="footer"></footer> </body>
.gritts { display: grid; grid-template-columns: 15% 25% 35% 25%; grid-column-gap: 10px; }
这为您提供了四列,三列排水沟.
每个排水沟得到10px,你得到100％30px,这会导致溢出.
box-sizing：border-box无效,因为它仅适用于width,height,min-width / height / max-width / height和flex-basis(source).
相反,尝试这样的事情：
grid-template-columns: 15% 25% calc(35% - 30pX) 25%;
或这个：
grid-template-columns: 15% 25% 1fr 25%;
以上是大佬教程为你收集整理的html – grid-column-gap导致溢出全部内容，希望文章能够帮你解决html – grid-column-gap导致溢出所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。