Why do I have an overflow on the X axis in the following snippet?
The overflow is generated once I apply grid-gap: 10px on my .body grid container.
div:not(.header):not(.body):not(.row) {
border: 1px solid grey;
}
.header {
margin-top: 20px;
display: grid;
grid-gap: 10px;
grid-template-areas: "header-left header-right-up" "header-left header-right-down";
grid-template-rows: 40px 40px;
grid-template-columns: minmax(50px, 200px) auto;
}
.header-left {
grid-area: header-left;
}
.header-right-up {
grid-area: header-right-up;
}
.header-right-down {
grid-area: header-right-down;
}
.body {
margin-top: 20px;
display: grid;
grid-template-columns: 25% 50% 25%;
grid-auto-rows: 80px;
grid-gap: 10px;
}
.row-left {
}
.row-center {
}
.row-right {
}
<div class="header">
<div class="header-left">image</div>
<div class="header-right-up">content</div>
<div class="header-right-down">long content</div>
</div>
<div class="body">
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
</div>
</div>
https://codepen.io/anon/pen/WdJExz?editors=1100
Short Answer
Because the width of the columns plus the width of the gaps is greater than 100%.
Explanation
You have a 3-column grid container (.body):
grid-template-columns: 25% 50% 25%
The total width of those columns is 100%.
You're then adding gutters between the columns (and rows):
grid-gap: 10px
which is shorthand for:
grid-column-gap: 10px;
grid-row-gap: 10px;
So this becomes the width calculation:
25% + 50% + 25% + 10px + 10px
Hence,
100% + 20px > 100%, which results in an overflow condition
Note that the grid-*-gap properties apply only between grid items – never between items and the container. That's why we calculate two grid gaps, not four.
As a solution, instead of percentage units, try using fr units, which apply only to free space. This means that fr lengths are calculated after any grid-gap lengths are applied.
grid-template-columns: 1fr 2fr 1fr
div:not(.header):not(.body):not(.row) {
border: 1px solid grey;
}
.header {
margin-top: 20px;
display: grid;
grid-gap: 10px;
grid-template-areas: "header-left header-right-up" "header-left header-right-down";
grid-template-rows: 40px 40px;
grid-template-columns: minmax(50px, 200px) auto;
}
.header-left {
grid-area: header-left;
}
.header-right-up {
grid-area: header-right-up;
}
.header-right-down {
grid-area: header-right-down;
}
.body {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* ADJUSTMENT */
grid-auto-rows: 80px;
grid-gap: 10px;
}
.row-left {}
.row-center {}
.row-right {}
<div class="header">
<div class="header-left">image</div>
<div class="header-right-up">content</div>
<div class="header-right-down">long content</div>
</div>
<div class="body">
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
</div>
revised codepen demo
More details here: The difference between percentage and fr units
If you want to use percentages or some other unit, there is one more solution. The use of the minmax() function will allow the columns to shrink to fit the parent container and not cause overflow.
The solution would look like this:
grid-template-columns: minmax(auto, 25%) minmax(auto, 50%) minmax(auto, 25%);
gap: 10px;
More on the minmax() function here.
If you have a fixed number of grid columns that should be the same width and use grid-gap, there's a way to do it:
display: grid;
grid-template-columns: repeat(4, calc(25% - 0.75em));
grid-gap: 1em;
In this case, each row would have 4 grid columns, and the total space occupied by grid-gap would be 3em. In order to distribute the overflowing space evenly, divide the space by the number of grid columns.
3em / 4 = 0.75em
This makes all the grid columns have the same width.
Codepen demo
Late reply but 100% worth it.
Summary from many resources.
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 (1fr = 25%):
grid-template-columns: 1fr 2fr 1fr;
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,1fr) minmax(0,2fr) minmax(0,1fr);
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/
I stumbled into this problem too, and what it worked for me was to replace grid-template-column: 50% 50%; with grid-template-column: auto 50%;.
Related
I'm wondering if it's possible to create a grid with a variable and unknown amount of cells such that:
The size of each cell is between MINIMUM and MAXIMUM size (lets say 200px and 500px) AND
The cells always expand all the way to edge of the container
https://codesandbox.io/s/grid-auto-fit-jqp7w
If you do
gridTemplateColumns: `repeat(auto-fit, minmax(200px, 1fr))`,
the cells will always fill up to the edge of the container correctly, but if you only have one cell, it can potentially be very large.
If you do
gridTemplateColumns: `repeat(auto-fit, minmax(200px, 500px))`,
the grid cells will wrap rather than decrease their size to fit
I don't know a way to achieve what you want using fixed width in minmax, like 200px and 500px. But a close option is to use auto-fill. It keeps responsiveness but does not allow a single child to take the full width of its parent when the screen is large.
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 5px;
margin: 5px;
}
.cell {
background-color: grey;
padding: 1rem;
}
.single {
background-color: green;
}
<div class="grid">
<div class="single cell">single cell</div>
</div>
<div class="grid">
<div class="cell">cell</div>
<div class="cell">cell</div>
<div class="cell">cell</div>
</div>
This is something that I've been struggling with for a while, but I can't seem to find a way to do it.
If you have an odd number of items in grid and you want 2 items per row (1fr 1fr), you end up with a single item in the last row that is left-centered.
I just want to make it centered so it looks nicer.
Here's a picture too.
You can try something like this jsfiddle:
/* visibility properties */
body {
width: 60%;
margin: 5% auto;
}
div {
margin: 3%;
width: 100px;
height: 100px;
background-color: black;
justify-self: center;
}
div:nth-of-type(2n) {
background-color: red;
}
/* actual code: */
section {
display: grid;
grid-template-columns: 1fr 1fr;
}
#last-div {
grid-column: 1 / span 2;
}
<section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="last-div">
</div>
</section>
Get more info on CSS Grid: complete-guide-grid
You could try something like this since I faced a similar issue in one of my earlier projects.
grid-template-columns : repeat(auto-fit, minmax(<minSize>, 1fr));
Set minSize to whatever minimum width you want an element to occupy.
I am using the following CSS Grid layout:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
This tries to fit as many 500px columns as possible then dispatches the remaining space evenly amongst the columns.
The problem is that when there is only one column left (grid width < 1000px) the column will shrink until it reaches 500px and will not shrink more than that, even if the grid gets smaller, causing the column to overflow.
I've tried many combinations, including nesting minmax functions, but could not solve this issue.
You can consider max-width on your elements using vw unit. Simply pay attention to maring/padding/border in order to identify the correct value.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
.grid>span {
border: 2px solid red;
height: 50px;
max-width:100vw;
box-sizing:border-box;
}
body {
margin:0;
}
<div class="grid">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
grid-template-columns: repeat(auto-fit, minmax(min(100%,500px), 1fr));
The min(100%, ...) should allow your grid-item to be smaller than 500px when the parent of the grid-container is smaller than that.
I think this will help
grid-template-columns: repeat(5,500px);
This is easiest to explain with an example:
.grid {
display: grid;
grid-gap: 5px 10px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.grid>div {
background-color: yellow;
white-space: nowrap;
}
<div class="grid">
<div>foo</div>
<div>foo bar</div>
<div>eg ergerg</div>
<div>fo eagro</div>
<div>4ergearg ergearg er</div>
<div>earg erg</div>
<div>bverbr</div>
<div> eargerg </div>
</div>
I want to size all the columns such that they're the same width as the widest column, in this case the one that says "4ergearg ergearg er".
I don't know its width, thus I don't know what to replace that 80px with. min-content, max-content, and auto don't seem to work.
In other words, i want to stretch the columns to prevent the content from overflowing:
I'm doing some testing with the css-grid spec and am encountering an issue on my first test. I wanted to create a centered grid with 3 columns and have divs inside the grid fill the width of the columns. This works but i was not expecting the 1px margin on the right see:
.wrapper {
max-width: 400px;
margin: 0 auto;
background-color: red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.cell {
background-color: grey;
}
<div class="wrapper">
<div class="grid">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell">c</div>
</div>
</div>
I expect this has to do with a percentage rounding issue. If you scale the browser you see that the margin sometimes disappears.
I know i can fix this with flexbox and let the cell grow, but i'd rather know how to handle this with css-grid.
It's a math and could not be fixed. For example, if you divide 100 to 3, you will get something like 33.33333333333333..........
By the way, you could use
grid-template-columns: repeat(3, 1fr);
Instead of
grid-template-columns: 1fr, 1fr, 1fr;