本文介绍了栅格-列-间隙导致溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚刚测试了CSSdisplay: grid。它工作得很好，但grid-column-gap: 10px;破坏了父容器。下面代码中的绿色区域比网格区域小。
box-sizing: border-box;显然没有效果。
如何使网格区域和父容器的宽度相等？
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">/* ------------------------------- 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>推荐答案
您已将列设置为占据容器的100%宽度：
.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%;
revised demo
或此：
grid-template-columns: 15% 25% 1fr 25%;
revised demo
这篇关于栅格-列-间隙导致溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！