grid-column-gap causes an overflow

W

2

16

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

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

How do I make the grid area and the parent container have 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>

Weinhardt answered 3/8, 2017 at 16:29 Comment(0)

H

15

You have your columns set to occupy 100% 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 column gutters.

With each gutter getting 10px, you get 100% + 30px, which results in an overflow.

box-sizing: border-box will not help since it applies only 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%;

revised demo

or this:

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

revised demo

Hermit answered 3/8, 2017 at 16:51 Comment(0)

C

3

Late reply but 100% worth it.

Summary.

Usage with %

Grid columns calculated with % are not taking into accounts gutters (aka gaps). Therefore you need to add the pixels of the added gaps to the calculation. so totalGridWidth = SUM(...%) + gutters = ~100% + gutters

Usage with fr

The previous issue does not happen (exception on number 3.) as it includes to calculate the free space as well with the gaps. so calculation is as follow: (free space - gutters) / 12 = 1fr therefore here you could get ratios as fractions instead of portions as percentages.

Or in other words with the Least Common Divisor (LCD = 5%):

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

Usage with minmax(0,Xfr)

By default the browser layout engine uses to calculate Xfr this formula minmax(auto,Xfr) which relies on the minimum size of your items, and when any of those items or inner elements are expected to grow in size indefinitely with things like width:100% the auto parameter will make still case 2. to run sometimes with overflown grids. To prevent this, we need to force the browser to use a method that can shrink the elements until its real minimum, which is 0px to do this you need to use minmax(0,Xfr) with X as the desired fraction.

Or in other words, for your previous case:

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

I know this might look too verbose, but given your such edge case we cannot use repeat() here, and in any case, this will be a bulletproof for your overflowing issues.

You can read more in this article I have found:

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

Con answered 29/11, 2021 at 12:33 Comment(0)

Summary.

Recommended topics

Hot tags