Prevent content from expanding grid items
Solution 1
By default, a grid item cannot be smaller than the size of its content.
Grid items have an initial size of min-width: auto
and min-height: auto
.
You can override this behavior by setting grid items to min-width: 0
, min-height: 0
or overflow
with any value other than visible
.
From the spec:
6.6. Automatic Minimum Size of Grid Items
To provide a more reasonable default minimum size for grid items, this specification defines that the
auto
value ofmin-width
/min-height
also applies an automatic minimum size in the specified axis to grid items whoseoverflow
isvisible
. (The effect is analogous to the automatic minimum size imposed on flex items.)
Here's a more detailed explanation covering flex items, but it applies to grid items, as well:
This post also covers potential problems with nested containers and known rendering differences among major browsers.
To fix your layout, make these adjustments to your code:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
.day-item {
padding: 10px;
background: #DFE7E7;
overflow: hidden; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
1fr
vs minmax(0, 1fr)
The solution above operates at the grid item level. For a container level solution, see this post:
Solution 2
The previous answer is pretty good, but I also wanted to mention that there is a fixed layout equivalent for grids, you just need to write minmax(0, 1fr)
instead of 1fr
as your track size.
Solution 3
The existing answers solve most cases. However, I ran into a case where I needed the content of the grid-cell to be overflow: visible
. I solved it by absolutely positioning within a wrapper (not ideal, but the best I know), like this:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
}
.day-item-wrapper {
position: relative;
}
.day-item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background: rgba(0,0,0,0.1);
}
https://codepen.io/bjnsn/pen/vYYVPZv
Related videos on Youtube
Loilo
I'm Florian, a web developer located in Karlsruhe, Germany. Playing with all things web is my passion — HTML/CSS, PHP and especially JavaScript in all variations.
Updated on January 24, 2021Comments
-
Loilo over 3 years
TL;DR: Is there anything like
table-layout: fixed
for CSS grids?
I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.
The calendar should fill the page, so the year grid container gets a width and height of 100% each.
.year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); }
Here's a working example: https://codepen.io/loilo/full/ryXLpO/
For simplicity, every month in that pen there has 31 days and starts on a Monday.
I also chose a ridiculously small font size to demonstrate the problem:
Grid items (= day cells) are pretty condensed as there are several hundreds of them on the page. And as soon as the day number labels become too large (feel free to play around with the font size in the pen using the buttons on the upper left) the grid will just grow in size and exceed the page's body size.
Is there any way to prevent this behaviour?
I initially declared my year grid to be 100% in width and height so that's probably the point to start at, but I couldn't find any grid-related CSS properties that would've fitted that need.
Disclaimer: I'm aware that there are pretty easy ways to style that calendar just without using CSS Grid Layout. However, this question is more about the general knowledge on the topic than solving the concrete example.
-
Michael Coker about 7 yearsWhat do you want to happen instead? The font in each cell can just be whatever size and it never causes the grid cell size to increase?
-
Loilo about 7 yearsExactly. Basically a more convenient way of what would happen if I set the sizes of the grid items to according percentage values instead of fractions.
-
Loilo about 7 yearsI'm basically looking for a grid-layouty version of table-layout: fixed (see: codepen.io/loilo/pen/dvxpvq?editors=1100)
-
Lonnie Best over 5 yearsThis the the biggest pain in the whole CSS Grid specification. Their needs to be a setting where grids areas cannot escape the dimensions of any of their parent grid containers! As is, it is a nightmare for deeply nested grid structures.
-
-
Loilo about 7 yearsWow. That's fascinating and interesting at the same time, and I would've definitely not have come up with that by just trying around. Did you just take a glance through the spec for that information? Because after not knowing what to google for, that's what I tried before, but I ended up reading the wrong section (after concluding the wrong cause of the problem).
-
Michael Benjamin about 7 yearsI had run into this problem before with flex items. Being that there are many similarities between flex and grid items, I figured the behavior might be the same and zeroed in on that section of the spec.
-
user about 7 yearsIt fixes the height, but it continues to grow in the horizontal direction,
min-width: 0;
doesn't help. Am i missing something? -
Michael Benjamin about 7 years@user, the Grid Layout implementations clearly vary between Chrome and Firefox. The original code in my answer works in Chrome. But it needs further adjustment to work in FF. Add
min-width: 0
to both.month-grid
and.day-item
. Answer revised. -
G-Cyrillus over 6 yearsyou could also mention that
max-width:100%;
has also the effect to contain elements within their grid cell ;) stackoverflow.com/questions/47168389/… -
Knack about 6 yearsFor nested grids we need to apply this to all levels. But I really came here to upvote and thank you..
-
Pragy Agarwal over 5 yearsI always wondered why specifying height as x% doesn't work when the parent's height is defined in %/vh/vw. The content always ended up expanding the div and breaking the parent. This min-height thing is magic! It does sorta make sense too. Why don't the tutorial websites discuss these reasons!? Any place someone could find more such explanations as a pre curated list?
-
Michael Benjamin over 5 years@PragyAgarwal.. stackoverflow.com/users/3597276/michael-b?tab=answers :-)
-
Thierry Prost over 5 yearsI recommend this approach over the previous, accepted answer.
-
BAERUS over 5 yearsAlthough this works, I don't understand a bit of it ... Could you maybe explain why this works? What is minmax(0, 1fr) doing? Should that not always be 0? I'm confused :(
-
Mikko Rantalainen over 5 years
minmax(0, 1fr)
works because1fr
is really a shorthand forminmax(auto,1fr)
, which is not the correct value for the original question. -
Mikko Rantalainen over 5 yearsFor additional details, see github.com/w3c/csswg-drafts/issues/1777
-
Hugo Mallet over 4 yearscss spec contributors should stop taking drugs. Why not a new keyword ? Why making a special behavior of an already existing property that do not even make sense ? ... Will css become a day easy and intuitive ?
-
Peter about 4 yearsYou're the Real MVP! Thank you for the 'min-width: 0;' solution. I was able to fix my slick slider overflowing a cell (kenwheeler).
-
shinzou almost 4 yearsall other answers are hacks, this should be the accepted answer
-
vovchisko over 3 years
minmax
did the rick just perfect! -
Ben Steward almost 3 yearssaved me so much time. but sheesh what a terrible state of things. absolutely no way to predict or figure out this problem logically.
-
HamsterWithPitchfork over 2 yearsWhen somebody asks what is a CSS hack, then they should be pointed to this answer.