logo标签列表

grid-column-gap导致溢出问题

htmlcsscss-grid
16

我刚刚测试了CSS的display: grid。它运行良好，但是grid-column-gap: 10px;会破坏父容器。在下面的代码中，绿色区域比网格区域小。

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, 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>

2个回答
15

您的列设置为占据容器的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 (来源)。

相反，请尝试像这样：

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

修订版演示

或者这个：

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

改进版演示

2

回复晚了，但是一定是值得的。

总结。

  1. %使用方法

使用 % 计算的网格列没有考虑到间隙（也称为间距）。因此，您需要将添加的间隙像素加入计算中。因此，totalGridWidth = SUM(...%) + gutters = ~100% + gutters

  1. fr使用方法

前面提到的问题不会发生（第三个例外），因为它还包括在间隙中计算自由空间。因此，计算如下：(free space - gutters) / 12 = 1fr，因此您可以获得比例作为分数而不是百分比。

换句话说，使用最小公倍数（LCD = 5%）：

grid-template-columns: 3fr 5fr 7fr 5fr;

  1. minmax(0,Xfr)使用方法

默认情况下，浏览器布局引擎使用计算 Xfr 的公式 minmax(auto,Xfr)，其依赖于项目的最小大小，当这些项目或内部元素预计会无限增长时，例如使用 width:100% 时，auto 参数仍会使情况2有时会出现过度溢出的网格。为了防止这种情况，我们需要强制浏览器使用一种可以将元素缩小到其实际最小值（即0px）的方法，为此，您需要使用 minmax(0,Xfr)，其中X是所需的分数。

换句话说，对于您以前的情况：

grid-template-columns: minmax(0,3fr) minmax(0,5fr) minmax(0,7fr) minmax(0,5fr);

我知道这可能看起来太啰嗦了，但考虑到您的这种特殊情况，我们不能在这里使用 repeat()，而且在任何情况下，这都将是您溢出问题的万无一失的解决方案。

您可以在我找到的这篇文章中阅读更多内容：

https://css-tricks.com/preventing-a-grid-blowout/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接