Platform

MacBook Pro 15" - macOS 10.12.5 - Chrome 60.0.3112.113 (64bit)

Description

Content will not reduce width inside a grid with fixed/fluid/fixed width columns when container is narrowed.

Steps to reproduce

Create page with the following HTML/CSS.

<div class="grid flf">
  <div class="element">Fixed</div>
  <div class="element">Fluid</div>
  <div class="element">Fixed</div>
</div>

.grid {
  background: lightpink;
  display: grid;
  grid-template-rows: 200px;
  margin: 0 auto;
  width: 98vw;
}

.flf {
  grid-template-columns: 200px 1fr 200px;
}

.element {
  background: lightblue;
  color: #000;
  grid-row: 1;
  height: 200px;
  outline: 1px solid black;
  width: 200px;
  
  &:nth-child(2) {
    margin: auto;
  }
}

Widen, then narrow, the viewport and witness the content not resize with the container.

Demo

See https://codepen.io/evolutionxbox/full/gxyvzB/

Reduced Test Case: https://jsfiddle.net/wzvwn1zg/3/

I was using writing-mode: vertical-rl to create a vertical headline down the left side of the page. I created two columns using grid-template: auto / auto 1fr;. After the page was published, a viewer pointed out that it was broken in Safari; the headline was centered in the page with a skinny column down the right side.

In Chrome, Firefox, and Edge, the first column expands only enough to fit the width of the content (which I believe is the intended behavior of auto). In Webkit (I have not been able to personally test with an "official" copy of Safari on a Mac), there are huge margins being added to more-or-less center the content in the view port.

I have margin: 0 auto set on the first column; this is for smaller screen widths to center the heading at the top of the page. Removing either the margin or the writing-mode makes the problem disappear.

The workaround I am using is to add margin: 0 inside a media query.

This a bug in both Chrome and Safari related to the fit-content algorithm. It's actually broken for both as a dimension value and the grid fit-content() function.

https://bugs.chromium.org/p/chromium/issues/detail?id=814991

Just made a grid with 3 columns and around 250 elements with different heights. The containers auto calculated maximum height in Chrome seems to be 30'000 px, the last 50 elements don't fit in the container and so they are not able to span over the rows they need...

https://angular-3hmbxe.stackblitz.io/
https://stackblitz.com/edit/angular-3hmbxe

In the above example I've made a simplified version of our project.

On other browsers like Firefox, the height of .ui-content-div will enlarge when the content is enlarged by clicking on Larger, but will return to the original size when clicking on Smaller.

In Chrome, when you make the content larger by clicking on Larger, it will still get larger; however, when the content is made smaller by clicking on Smaller, .ui-content height does not return to the original size.

Best is to check this in both browsers with a small screen width, as it's a bit complicated to explain but quite noticeable visually.

I tried using grid to build my personal website.
On mobile, I always get the x-axis scroll bar, even tho there is no content there.

To see what I'm talking about, go to www.ivanskoro.com and inspect in mobile view (or visit it on a mobile device)

Even tho the body is 100% viewport width, it still has an x-scroll.

The solution is to put "display:block and margins/paddings: 0" on the grid container, but that of course kills the grid.

Hi, i found a wierd case
Hope it may help somebody

https://codepen.io/anon/pen/aYWgRw

Hello,

I think I’ve found a bug in iOS browsers when rendering CSS Grid Layouts. So, I thought I would submit it here. I have created a CodePen to demonstrate the bug.

https://codepen.io/martinduo/pen/GvOWqX/

The Pen renders a 1-column, 1-row, single area grid that contains a single cell with 20 lines of text in a element flagged as overflow:auto.

Running the Pen in iOS v10.3.3 on the iPad using Safari renders the cell showing all 20 text lines, no scrolling is triggered. This is also the same error seen using Chrome v60.3112.19 or Firefox v8.2 on the iPad.

Running this Pen on OSX v10.11.6, using Firefox (not Safari or Chrome) renders the cell correctly showing only the first few text lines with scrolling enabled to see the other lines.

Running this Pen on Win10 v1703, or Android v7.1.2, using Chrome, or Firefox renders the cell correctly showing only the first few text lines with scrolling enabled to see the other lines.

I have not found a workaround to fix this Pen code, but I did find a workaround in my full-blown project code in iPad portrait mode, with 3 rows in 1 column. There I could fix this by changing: “grid-template-rows: 1fr 54px 1fr;” to: “grid-template-rows: minmax(200px, 1fr) 54px minmax(200px, 1fr);”.

Interestingly, when in iPad landscape mode, with a media query switch to 2 rows in 2 columns, the error never did show up in my project code.

Bruce Martin

Code:

.grid {
    display: grid;
    grid-template-columns: repeat(3, fit-content(100px));
}

Demo: https://codepen.io/simevidas/pen/LjLJgo?editors=0100

I’ve noticed that in Firefox and Edge 16 (the upcoming version with full Grid support), when you have a bunch of columns clamped with fit-content(), the columns don’t stretch when there is more space available in the grid container. In Chrome, they do.

This isn’t a big problem, since, when I’m restricting the max size with fit-content(), I don’t want the tracks to extend beyond this size, so I can just set justify-content: start to disable stretching explicitly.

It seems that if there are more than 1000 rows, Chrome only displays the first 999 rows, while the following ones are not rendered correctly.

See the demo here: https://codepen.io/bludev/pen/MOpyQR

In Firefox and Edge 16, the example works properly.

In Chrome 67,
applying height: 100% to an img element inside a grid, will set the height of the image to 0

(Firefox doesn't have this problem)

Codepen: https://codepen.io/shaal-the-reactor/pen/RBGVVd

I made a codepen to show the issue.

https://codepen.io/shortfuse/pen/pYqLbQ

On Safari, if a grid-item gains position:fixed on browser resize, then it gets "stuck" on the screen.

Hi, I'm not quite sure where this issue falls but while i was checking out css grid i noticed it skips the 1st cell when wrapped in a div container.

https://codepen.io/jimmerioles/pen/qNdGvJ

Browser used:
Chrome Version 61.0.3163.100 (Official Build) (64-bit)

With flexbox's flex-grow applying to the grid container, Chrome seems to ignore justify-content

Test case: https://codepen.io/MondoGao/pen/KoYBja

Chrome 66.0:

Firefox 59:

Detailed description of the issue and example code

https://stackoverflow.com/questions/49103403/grid-template-rows-auto-bug-in-safari/49117333#49117333

PS: The solution for now is adding: grid-template-columns: 100%; to the grid element

A position: sticky child of a grid element - that itself is a position: sticky child of another grid element - will not stick in Edge.

Tested in Edge 17.17134. The correct behaviour has been seen tested in Chrome 68 and Firefox 62.

Demo: See this Jsfiddle

In a single column layout, iOS does not contain content in grid cells with an overflow:auto property. This bug is present in Safari, Chrome, and Firefox browsers running in iOS on an iPad. This PEN demonstrates the bug.

https://codepen.io/martinduo/pen/GvOWqX

Run this PEN in any browser on an iPad and you’ll see the first and third grid areas rendered showing all 17 rows of the element’s content. This is not the expected result.

Run this PEN in any other browser (that supports CSS Grid Layout) on any other device and you’ll see the first and third grid areas rendered showing 6 rows of content in a scrollable window. This is the expected layout.

The code:

.grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
}

The demo: https://codepen.io/simevidas/pen/KvMVWw?editors=0100

In Chrome and Firefox, the 4 grid items are centered in in a single row, while in Safari for iOS 10.3.3, they're laid out vertically as if there is no grid layout. Afaik, all <track-list> values, including max-content, are supported in the repeat() notation.

As a workaround, switching from max-content to auto seems to work fine. If I'm reading the spec correctly, auto is like max-content with the exception that it allows tracks to shrink to a certain point, based on a specified min-width/min-height value.

There are two bugs in Chrome that are particularly annoying, relating to forms:

1. If an input or textarea is a grid-item, it collapses to a width of 0 as soon as the user enters some text (OS X) — https://bugs.chromium.org/p/chromium/issues/detail?id=727076

2. Some elements, such a fieldset and button cannot be a grid container — https://bugs.chromium.org/p/chromium/issues/detail?id=375693

In Webkit & Blink, if we have something like

.grid {
  repeat(auto-fill, minmax(64px, 1fr) minmax(64px, 1fr));
  grid-gap: 1em;
}

Or: repeat() with an auto-fill/auto-fit, multiple minmax() and a grid-gap cause overflow due to incorrect grid items' widths computations. The bigger the grid-gap, the bigger the problem.

• Bug in webkit tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1341507
• Bug in blink tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=813511

Test case: https://codepen.io/kizu/pen/paayMm?editors=1100 (appears not on every viewport width, could need to be resized)

https://www.reddit.com/r/css/comments/6ssj1q/grid_css_question/

I just ran into a bug relating while creating a grid like this:

-----------------------------
|          Header           |
-----------------------------
|   Nav  |      Content     |
|        |                  |
-----------------------------

The grid has a set size, say 200px.
The Nav has a height which depends on it's children. Should the nav exceed the grid size, scrollbars must appear within the nav.

This codepen illustrates the issue:
https://codepen.io/khs/pen/pWWWxz

• Firefox displays nav properly when a min-height:100% is used in CSS, whereas in Chrome/Opera the nav breaks out of the grid boundaries.
• The reverse happen when height:100% is set on the nav (and no min-height) - broken in Firefox, OK in Chrome/Opera.
• When max-height:100% is set, both Firefox and Chrome behave correctly, but Chrome seemingly doesn't update the Nav's height properly causing layout issues. If I change the window size, the sizing corrects itself. This is a different bug, which I'm still trying to reproduce reliably.

This issue is also filed here: https://bugzilla.mozilla.org/show_bug.cgi?id=1381512

In a single column layout, iOS does not contain content in grid cells with an overflow:auto property. This bug is present in Safari, Chrome, and Firefox browsers running in iOS on an iPad. This PEN demonstrates the bug.

https://codepen.io/martinduo/pen/GvOWqX

Run this PEN in any browser on an iPad and you’ll see the first and third grid areas rendered showing all 17 rows of the element’s content. This is not the expected result.

Run this PEN in any other browser (that supports CSS Grid Layout) on any other device and you’ll see the first and third grid areas rendered showing 6 rows of content in a scrollable window. This is the expected layout.

TL;DR, See demo: https://jsfiddle.net/0fezqfxw/
It will display correctly in Chrome, Firefox, Edge. It is not displayed in Safari.

For example, when fixing the aspect ratio, you can not specify height for the parent element.

Thanks for this great repository, And sorry my bad English!

Is it just me , but Im experiencing the opposite error. Adding no prefixes to the code Firefox is adding them in itself and then reading them as errored lines and thus not displaying correctly. (Chrome shows grid layout as intended)

this is my code from VS Studio 2017

This is what firefox reads

Am using Firefox Developer Edition 60.0b4 (64 bit)

Codepen demo: https://codepen.io/mor10/pen/zWmdPN

Short description: If grid columns are defined using fr units and a column contains a select element with a very long option text, the length of the option text defines the width of the grid column, regardless of the width of the select element and whether select { max-width: 100%; } is set.

https://jsfiddle.net/Lw3gpdak/2/

I have a pretty simple header/content/footer grid setup with an additional sidebar column. That sidebar is made of another grid containing it's own header and content cells. I want the two content areas (main and sidebar) to scroll vertically and never overflow the parent grid's height.

Please see: https://codepen.io/martyns/pen/JZXgEj

In Firefox the .sidebar-content div shows a vertical scrollbar (which it how I want it to look and behave) while in Chrome there is no such scrollbar and the content overflows, and then forces the parent grid to overflow horribly.

Anyone see this issue before and/or have any ideas of a simple workaround?

Long words don't break to the next line where template column widths are defined with fr units

Codepen #1: (word-wrap / overflow-wrap)

Codepen #2: (hyphens)

Workarounds:

1. use minmax() function instead of fr units. eg:

grid-template-columns: minmax(0, 1fr); instead of

grid-template-columns: 1fr;

2. use the word-break property
   For chrome: word-break: break-word is sufficient, but firefox requires word-break: break-all - which has the unwanted effect of breaking words in the middle.

For reference, see: https://stackoverflow.com/questions/51253050/css-grid-grows-over-100-width-with-fr-but-not-with-minmax

The grid / row height calculation is off in Chrome.

Codepen: https://codepen.io/maennchen/pen/xavrgj

Screenshot Chrome (69):

Screenshot Expected:

Correct Results are yielded by: Safari (12), Firefox (62), Opera (52), Edge (17)

I've created a grid in CSS using progressive enhancement to use inline-block, then flexbox and then CSS Grid. The system works in all browsers except for Microsoft Edge.

In Edge the grid items are being stacked on top on one another. The code I have for CSS Grid is written inside a @supports tag which Edge seems to think it supports.

I'm not entirely sure where the problem is occurring or if the problem is part of my codebase but it works across all of the other modern browsers.

https://codepen.io/matchboxhero/pen/OjEWqV?editors=1100

Demo:

Codepen: https://codepen.io/anon/pen/XLmXeL

Considing the following:

grid-template-columns: repeat(auto-fill, minmax(<X>px, <Y>%));
for example: grid-template-columns: repeat(auto-fill, minmax(400px, 25%));

Expected behaviour:

Items are at least Xpx (eg 400px), but at most take Y% (eg 25%) of the grid.
When Xpx is bigger than Y% (eg with grid-width 800px -> 400px > 25%), Xpx is used (https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax: "If max < min, then max is ignored and minmax(min,max) is treated as min.")
Therefore the auto-fill will create at most Y% columns (eg 4 columns at 25%, 5 columns at 20%, 10 columns at 10%, ...), but there might be fewer, given the width of the grid (eg for a grid with with 800px and X = 400, there should be two).
Each column is at least Xpx (eg 400px).
This way items wrap nicely and no item is placed auto-side the grid.

Observed behaviour:

There are more grid-columns created than fit the grid. To be exact, there are always as many columns created as would fit the maximum-value (25% -> 4 columns, 20% -> 5 columns, ...).
Each column takes the minimum-value as width (in the example above 400px).
This makes the grid overflow! It also prevents the intended wrapping.

Note that by above logic the following should holds true:

Given
"If max < min, then max is ignored and minmax(min,max) is treated as min."
width: 800px;

Then
grid-template-columns: repeat(auto-fill, minmax(400px, 25%));
Should equal
grid-template-columns: repeat(auto-fill, 400px);

because
minmax(400px, 25% [of 800px])) = minmax(400px, 200px)) = 400px

Browsers

Observed in Firefox (67.0.2 (64-bit)) and Chrome (Version 74).

Partial workaround

Use flexbox (display: flex on wrapper) with wrapping (flex-wrap: wrap on wrapper) and max-width: 25%, min-width: 400px, width: 100vw (all on child; potentially add box-sizing: border-box to fit all four items despite of borders).
Downsides: Item's can't be placed at certain positions in the grid. Items can't stretch in height (span 2 + dense grid).

Steps to reproduce:

Load https://codepen.io/mirisuzanne/pen/8b576caf81541903f28d418164ae5358?editors=1100

• First block uses plain numbers in grid-column-start
• Second block uses calc() for the same column-start position
• Third block uses custom properties
• Fourth block uses calc with custom properties (the likely use-case)

Actual results: In Firefox, blocks 2 and 4 (using calc) ignore the given value, and start in the default column.

Expected results: In Chrome, all four blocks start and end at the same place, spanning from grid-line 3 through grid-line 7.

This seems like a bug to me, but I reported it a few months ago, and Mozilla has labeled it wontfix. Maybe I'm missing something? As far as I can tell, this isn't defined in the spec one way or the other.

https://codepen.io/rdsilvalopes/pen/eXQjQZ

When I used the grid setting
.menu {
     grid-column: 1 / 3; <-------------

And the content
.contento {
     grid-column: 3 / -1; <-------------

And resizing it's overflowed

But, this is the only configuration that works using number 2.
If you change the number it does not fit and always overflow to other box when you resize.

.menu {
     grid-column: 1 / 2; <-------------

And the content
.contento {
     grid-column: 2 / -1; <-------------

We ran into getting multiple issues with people using the repo as though it were stackoverflow. I'd recommend putting a section in your intro to see your gridbyexample for tips/tricks and if they need help on something to post that to Stack Overflow or similar resource, that will allow you to quickly close the issues and link to an anchor in your readme rather than explaining that over and over.

Platform

Windows 10 - Chrome 60.0.3112.113 (64bit)

Description

In Chrome max-height: 0 is ignored when align-items: baseline applied to grid.

Steps to reproduce

Create page with the following HTML/CSS.

<div class="grid hidden">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
</div>

<div class="grid hidden baseline">
  <div>&nbsp;</div>
  <div>BASELINE</div>
  <div>&nbsp;</div>
</div>

.baseline{
  align-items: baseline;
}

.hidden{
  max-height: 0px;
}

.grid{
  margin: 20px;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
}

.grid > div{
  background: #ff6b6b;
  color: white;
}

.grid, .grid > div{
  outline: 1px dashed grey;
}

Because of class .hidden, which applies max-height: 0, both grids are supposed to be hidden, but one with baseline is not.

Demo

https://codepen.io/RudManusachi/pen/jLgNOZ

See an example here: https://jsfiddle.net/5wdy33n0/4/

Situation: I created a layout with an auto-width grid column. A grid area which spans the top track contains images. The images are styled to float left with a percentage width and auto height.

Bug: In Chrome (tested with v62), the top grid track does not stretch in height to fit the auto-height images. Instead the grid track gets the height of the original, un-scaled image. In Firefox (tested with v56) the top grid track does stretch to the height of the images. The cause seems to be a combination of an auto-width grid column and stretched images.

Expected (by me) behavior: What Firefox does.

Issue #15 is about a height bug too, but I believe this is not the same bug. Excuse me if this turns out to be a duplicate.

Chromium Bug • Test Case

Chrome does not seem to recalculate the auto margin on child elements of an element with display: grid when the overflow changes from hidden to auto. This can cause a horizontal scroll bar to appear when the vertical scrollbar returns. Only an issue when there is vertical overflow that causes a scrollbar to appear.

May be related to #16

When using CSS grid and specifying columns as percentages, it ignores box sizing
https://codepen.io/electrifried/pen/MzQPNO

Is this intentional? I couldn't find much on this issue but because I am used to using percentages with margins and padding I thought grid would be similar. I'm not sure if this affects grid-template-rows either.

I know you can write grid-template-columns: 50% 1fr instead of grid-template-columns: repeat(2,50%) but it's just force of habit...plus it feels nicer to me to just write repeat (2, 50%).

CodePen: https://codepen.io/yatil/pen/WZpKvE

The black test box should be fixed to the bottom right of the screen. In Safari, bottom is calculated to -1275px, right is calculated to 846px although both are set to 0 in the CSS:

It works as expected in Firefox and Chrome.

I couldn't tell if this was related to other bugs, although I think there are similar % calculations that may be related.

Basically, I discovered that, within a grid, a "cell's" child's height calculation for 100% changes if other content within that cell has its height set explicitly vs. intrinsically. In other words, the grid item is the exact same visible height, but if content has an explicit height, then sibling element's 100% calculation will act differently vs. the content having an intrinsic height of the same value.

Codepen: https://codepen.io/matthewdean/pen/LrZxjX
Bug filed: https://bugs.chromium.org/p/chromium/issues/detail?id=849945

This is a well known interop issue that happens in both Flexbox and Grid.
Firefox resolves the percentage margins/padidngs on items against their respective dimension (so different from what happens in regular blocks where they are always resolved against width).
However, Chromium follows the same than blocks.
See Chromium bug #229568.

The spec allows both behaviors: https://drafts.csswg.org/css-grid/#item-margins

Percentage margins and paddings on grid items can be resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages all resolve against width)
  And has a note to avoid use percentage margins/paddings for grid items.

Simple example to reproduce the issue: https://codepen.io/mrego/pen/EvyMNz
In Firefox the top and bottom margins are 10px, while the left and right are 20px.
In Chromium all of them are 20px.

BTW, there are use counters in Chromium to detect the usage of percentage margins/paddings in flex items:

• https://www.chromestatus.com/metrics/feature/timeline/popularity/955
• https://www.chromestatus.com/metrics/feature/timeline/popularity/956

hi, thank your for the buglist :) my question: do you remove bugs that are resolved, respectively fixed?

I was incorporating CSS Grid into my header layout and discovered that in Firefox and Chrome align-items: center doesn't work as expected when the child element using a percentage for max-height. My practice has been to use max-height: 100% and width: auto to fit logos into site header. It doesn't look like I can do this using grid. It does appear to work in Safari.

Pen: https://codepen.io/joelcomit/pen/wrBqNL

• Reduced Test Case

(I’m not sure whether that’s a bug or as per specification. Atleast for me, it is unexpected.)

1. An element specifies display: grid and some maximum width (e.g. 400px)
2. A child pre element has overflow: auto or overflow: scroll. If it overflows, it triggers scrollbars. The one grid column will then grow to the specified maximum width
3. Now, another pre element is wrapped in another element (it’s no longer a direct child of the grid container). It has the same properties as the other pre element. If it overflows, it grows as wide as its content demands. The one grid column will then grow just as wide.

Is this to be expected?

Let me know if additional info is needed. :)

@rachelandrew Not sure if this is the place to report and discuss.

The following template gives different result in safari vs chrome:

Safari

https://stackoverflow.com/q/48974380/3935891

Here I try to layout 8 divs automatically, based on their row span definition.
https://codepen.io/anon/pen/Nvxdjo
Row heights appears to adapt well for the first 5 rows. But then, all the subsequent rows seem to have the height of the 5th row. The consequences are the blank spaces in the 4th and 5th divs.

The behavior seems good on Blink. It compresses the rows/divs as I expect.

Following Fiddle crashes Ms-Edge

https://jsfiddle.net/57ksthz9/14/

Ms-Bug:

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14847315/

See
https://codepen.io/kidwm/pen/prKMQV