Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rachelandrew/gridbugs

A curated list of Grid interop issues
https://github.com/rachelandrew/gridbugs

css css-grid-layout

Last synced: about 5 hours ago
JSON representation

A curated list of Grid interop issues

Awesome Lists containing this project

README 

        
# GridBugs



Inspired by [Flexbugs](https://github.com/philipwalton/flexbugs) this list aims to be a community curated list of CSS Grid Layout bugs, incomplete implementations and interop issues. [Grid shipped into browsers](https://gridbyexample.com/browsers) in a highly interoperable state, however there are a few issues - let's document any we find here.



While I'd like to focus on issues relating to the [Grid Specification](https://drafts.csswg.org/css-grid/) here, it is likely that related specs such as Box Alignment will need to be referenced. If you think you have spotted an issue and it seems to relate to Grid, [post it](https://github.com/rachelandrew/gridbugs/issues). We can work out the details together and make sure browser or spec issues get logged in the right place.



_Also, please raise an issue if I am wrong about any of these_ or you have more info or examples to add. Quite possibly I've pointed the finger at the wrong UA or missed a change in the spec. Help to make the list accurate appreciated!



## This is not CSS Grid technical support



Please raise issues about interop issues where you have already been through the process of creating a **Reduced Test Case** to check that the issue isn't something in your code. If you want to learn about CSS Grid Layout then check out [Grid by Example](https://gridbyexample.com) where I have video tutorials, small examples and links to other resources. I will answer more general grid questions on my [AMA](https://github.com/rachelandrew/cssgrid-ama) when time allows. I also have information regarding [fallbacks for older browsers](https://rachelandrew.co.uk/archives/2017/07/04/is-it-really-safe-to-start-using-css-grid-layout/).



## The bugs



1. [`grid-auto-rows` and `grid-auto-columns` should accept a track listing](#1-grid-auto-rows-and-grid-auto-columns-should-accept-a-track-listing)

2. [Repeat notation should accept a track listing](#2-repeat-notation-should-accept-a-track-listing)

3. [Fragmentation support](#3-fragmentation-support)

4. [Sizing of items with an intrinsic size inside fixed size grid tracks](#4-sizing-of-items-with-an-intrinsic-size-inside-fixed-size-tracks)

5. [Items with an intrinsic aspect ratio should align start](#5-items-with-an-intrinsic-aspect-ratio-should-align-start)

6. [The `grid-gap` property should accept percentage values](#6-the-grid-gap-property-should-accept-percentage-values)

7. [Grid gaps should behave as auto-sized tracks?](#7-grid-gaps-should-behave-as-auto-sized-tracks)

8. [Setting max-height to a percentage should scale down a larger image inside a grid track](#8-setting-max-height-to-a-percentage-should-scale-down-a-larger-image-inside-a-grid-track)

9. [`min-content` and `max-content` in track listings](#9-min-content-and-max-content-in-track-listings)

10. [Some HTML elements can't be grid containers](#10-some-html-elements-cant-be-grid-containers)

11. [A textarea that is a grid item collapses to zero width](#11-a-textarea-that-is-a-grid-item-collapses-to-zero-width)

12. [Space distributed to empty tracks spanned by an item with content](#12-space-distributed-to-empty-tracks-spanned-by-an-item-with-content)

13. [Inconsistency with percentage padding and margins](#13-inconsistency-with-percentage-padding-and-margins)

14. [fit-content is stretching](#14-fit-content-is-stretching)



### 1. `grid-auto-rows` and `grid-auto-columns` should accept a track listing



  

    Demos

    Browsers affected

    Tracking bugs

    Tests

  

  

    

      1.1 — bug

    

    

     Firefox

    

    

      Firefox #1339672

    

    WPT

  



The properties `grid-auto-rows` and `grid-auto-columns` enable an author to set the size of tracks created in the implicit grid. The spec says:



> "If multiple track sizes are given, the pattern is repeated as necessary to find the size of the implicit tracks. The first implicit grid track before the explicit grid receives the first specified size, and so on forwards; and the last implicit grid track before the explicit grid receives the last specified size, and so on backwards." - [7.6 Implicit Track Sizing](https://www.w3.org/TR/css-grid-1/#auto-tracks)



### 2. Repeat notation should accept a track listing



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      2.1 — bug

    

    

     Firefox

    

    

      Firefox #1341507

    

  



Repeat notation can accept a single track sizing to repeat, eg:



`repeat(3,200px);`



Or a track listing:



`repeat(3, 200px 100px);`



This includes when the number of repeats is `auto-fill` or `auto-fit` to create as many tracks as will fit. 



> "The first argument specifies the number of repetitions. The second argument is a track list, which is repeated that number of times." - [Syntac of `repeat()`](https://www.w3.org/TR/css-grid-1/#auto-repeat)



### 3. Fragmentation Support



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

    

     Firefox

     
Chrome

     
Safari

    

    

      Firefox #1266265


      Chrome #614667

  



There is limited fragmentation support across browsers at present, therefore features such as the `break-*` properties are unlikely to work reliably. For details of how fragmentation should work in Grid Layout see [12. Fragmenting Grid Layout](https://www.w3.org/TR/css-grid-1/#pagination). 



### 4. Sizing of items with an intrinsic size inside fixed size tracks



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      4.1 — bug

    

    

     Firefox

    

    

      Firefox #1385410

    

  



In Firefox images with an intrinsic size are scaling down to fit into a fixed size grid track, rather than overflowing.



I believe that the correct behavior is to overflow, as per the CSS WG resolution of [Issue 523](https://github.com/w3c/csswg-drafts/issues/523#issuecomment-300539109).



### 5. Items with an intrinsic aspect ratio should align start



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      5.1 — bug


      5.2 — workaround

    

    

     Safari 10 (fixed in Technical Preview)

    

    

  



In Safari 10, a grid item that has an intrinsic aspect ratio was defaulting to `stretch`, rather than `start`.



#### Workaround



The workaround for this is to declare `align-self: start` and `justify-self: start` on the item.



### 6. The `grid-gap` property should accept percentage values



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      6.1 — bug

    

    

     Safari 10 (fixed in Technical Preview 29)

       

    

      WebKit #170764

    

  



Currently percentage values of `grid-gap` are marked as **at-risk** in the Level 1 specification. A strong use case for percentage values is that of adding some grid layout features to a layout which already uses a float, or flexbox-based grid system [see tweet from @minamarkham](https://twitter.com/minamarkham/status/891029296604618752). These systems have to use percentages for spacing in order to create a 'grid'.



### 7. Grid gaps should behave as auto-sized tracks?



There is also an interop issue with regard to percentage `grid-row-gap` values, where the height of the grid is not a fixed size. Chrome and Safari TP, plus Edge Preview collapse the row gap to 0. Firefox is using a percentage of the total height, I think. 



- [Example 7.1](https://codepen.io/rachelandrew/pen/xLZbMm)

- [CSS WG discussion](https://github.com/w3c/csswg-drafts/issues/509#issuecomment-318812608)



### 8. Setting max-height to a percentage should scale down a larger image inside a grid track



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      8.1 — bug

    

    

    Chrome

       

    

      Chromium #750631

    

  



Using `max-height` on an image inside a fixed size track should resolve so that the image scales down to fit inside the track. Currently in Chrome this does not work and so the image overflows. Using `max-width` works when the image is constrained by the column track sizing, setting a fixed height works as expected as does setting a max-height using a length unit such as `px`.



### 9. `min-content` and `max-content` in track listings



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      9.1 — bug

    

    

     Safari 10 (fixed in Technology Preview)

    

    WebKit #169195

  



In Safari 10, the values `min-content`, `max-content` and `fit-content` were prefixed. These have now been unprefixed in Safari Technology Preview.



#### Workaround



The workaround for this is to use the prefixed `-webkit-min-content`, `-webkit-max-content` and `-webkit-fit-content`.



### 10. Some HTML elements can't be grid containers



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      10.1 — bug (fieldset)


      10.2 — bug (button)

    

    

    Chrome


     Safari 10 (fieldset fixed in Technology Preview)

    

    Chromium #375693

  



In Chrome (and Safari 10) fieldset elements with `display: grid` do not act as grid containers. The button element only functions as a grid container in Firefox. This is related to the same issue in Flexbox, [detailed on the Flexbugs site](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers).



### 11. A textarea that is a grid item collapses to zero width



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      11.1 — bug

    

    

    Chrome (on OSX only)

    

    Chromium #727076

  



On OS X Chrome, if a textarea is a grid item it collapses to 0 width when text is typed into it. _Linked to test case from the Chromium issue as due to the way CodePen loads into an iframe this doesn't seem to happen there._



### 12. Space distributed to empty tracks spanned by an item with content



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      12.1 — bug 1


      12.2 — bug 2

    

    

    Firefox

    

    Firefox #1386921


    Firefox #1386932

  



If you have a grid with empty tracks which are spanned by an item on the grid, those tracks should not be assigned extra space due to the spanning item. Firefox is assigning extra space (bug 1), related is the fact that Firefox does different things depending on source order (bug 2).



Thanks to everyone who helped to isolate these issues [here](https://github.com/rachelandrew/gridbugs/issues/2). The discussion is useful if you want to understand exactly what is going on.



### 13. Inconsistency with percentage padding and margins



  

    Demos

    Browsers affected

    Tracking bugs

  

  

    

      13.1 — bug

    

    

    Firefox & Edge match


    Chrome &amp Webkit match

    

    Chrome #229568

  



As detailed by @mrego there is [a longstanding interoperability issue with percentage padding and margins in both Grid and Flexbox](https://github.com/rachelandrew/gridbugs/issues/7). 



Firefox and Edge (Preview) resolve the percentage margins/paddings on items against their respective dimension (width or height), Chrome always uses width, in the same way that percentages are resolved in block layout. The [specification allows for both possibilities](https://drafts.csswg.org/css-grid/#item-margins), and suggests authors do not use percentage margins and padding.



### 14. fit-content is stretching



  

    Demos

    Browsers affected

    Tracking bugs

    Tests

  

  

    

      14.1 — bug

    

    

    Chrome


    Webkit

    

    Chrome #755994


    CSS Spec issue #1732

    WPT

  



Report by @simevidas [Chrome is stretched tracks sized with fit-content](https://github.com/rachelandrew/gridbugs/issues/9) where Firefox does not. Edge (Preview) matches the behaviour in Firefox.



It turned out this is less straightforward than first appeared. [See the discussion on the issue raised against the CSS spec](https://github.com/w3c/csswg-drafts/issues/1732). During the telecon on September 20, 2017 the CSS WG resolved that tracks should not stretch, making the Firefox/Edge behaviour correct. [The next day a patch was submitted to Blink](https://bugs.chromium.org/p/chromium/issues/detail?id=755994#c6) to fix the issue in Chrome.



#### Workaround



The workaround for this is to use `justify-content: start` or `justify-content: end` on the tracks.



## Acknowledgments



Gridbugs is maintained by [@rachelandrew](https://twitter.com/rachelandrew) and was heavily inspired by the excellent [Flexbugs](https://github.com/philipwalton/flexbugs). 



## Contributing



In the first instance [raise an Issue](https://github.com/rachelandrew/gridbugs/issues), include a Reduced Test Case that demonstrates the problem clearly. If you are aware of a workaround for the problem, add that too.