The grid wrapper pattern is useful for aligning grid content within a central wrapper, while also allowing items to break out and align to the edge of the containing element or page when desired.
Requirements
Items placed on the grid should be able to align to a horizontally-centered max-width wrapper and/or the outer edges of the grid.
Recipe
Choices made
This recipe uses the CSS Grid minmax()
function to define the grid track sizes in the grid-template-columns
property. For the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column tracks will grow to. Using a numeric unit (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using percentage values or viewport units will mean this wrapper grows or shrinks in response to its context.
The outer two columns have a maximum size of 1fr
, meaning that they will each expand to fill the remaining available space in the grid container.
Useful fallbacks or alternative methods
When using this recipe at page level it can be useful to set a max-width
along with left and right auto
margin
s to center the content horizontally:
.grid {
max-width: 1200px;
margin: 0 auto; // horizontally centers the container
}
/* Remove the max-width and margins if the browser supports Grid */
@supports (display: grid) {
.grid {
display: grid;
/* Other grid code goes here */
max-width: none;
margin: 0;
}
}
To “break out” a full-width item to the edge of the viewport you can then use this trick (courtesy of Una Kravets):
.item {
width: 100vw;
margin-left: 50%;
transform: translate3d(-50%, 0, 0);
}
This gives a good approximation of the layout, only without the benefit of being able to align items easily on an exact grid.
Accessibility concerns
Although Grid enables us to position items anwhere (within reason), it is important when placing items using CSS Grid that your underlying markup follows a logical order (see CSS Grid layout and accessibility for more details).
Browser compatibility
The various layout methods have different browser support. See the charts below for details on basic support for the properties used.
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
grid-template-columns
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-template-columns
|
Chrome Full support 57 Full support 57 Full support 29 Disabled' From version 29: this feature is behind the |
Edge Full support 16 Full support 16 No support 12 — 79 Alternate Name' Uses the non-standard name: |
Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
IE Full support 10 Full support 10 Alternate Name' Uses the non-standard name: |
Opera Full support 44 Full support 44 Full support 28 Disabled' From version 28: this feature is behind the |
Safari
Full support 10.1 |
WebView Android
Full support 57 |
Chrome Android Full support 57 Full support 57 Full support 29 Disabled' From version 29: this feature is behind the |
Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
Opera Android Full support 43 Full support 43 Full support 28 Disabled' From version 28: this feature is behind the |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 6.0 |
Animation of tracks | Chrome
No support No |
Edge
No support No |
Firefox
Full support 66 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 66 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
fit-content()
|
Chrome
Full support 29 |
Edge
Full support 16 |
Firefox
Full support 51 |
IE
No support No |
Opera
Full support 44 |
Safari
Full support 10.1 |
WebView Android
Full support 57 |
Chrome Android
Full support 57 |
Firefox Android
Full support 51 |
Opera Android
Full support 43 |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 6.0 |
minmax()
|
Chrome Full support 57 Full support 57 Full support 29 Disabled' From version 29: this feature is behind the |
Edge
Full support 16 |
Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 44 Full support 44 Full support 28 Disabled' From version 28: this feature is behind the |
Safari
Full support 10.1 |
WebView Android
Full support 57 |
Chrome Android Full support 57 Full support 57 Full support 29 Disabled' From version 29: this feature is behind the |
Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
Opera Android Full support 43 Full support 43 Full support 28 Disabled' From version 28: this feature is behind the |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 6.0 |
repeat()
|
Chrome Full support 57 Full support 57 Full support 38 Disabled' From version 38: this feature is behind the |
Edge
Full support 16 |
Firefox Partial support 57 Partial support 57 Notes' Notes' Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 44 Full support 44 Full support 28 Disabled' From version 28: this feature is behind the |
Safari
Full support 10.1 |
WebView Android
Full support 57 |
Chrome Android Full support 57 Full support 57 Full support 38 Disabled' From version 38: this feature is behind the |
Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' From version 40 until version 59 (exclusive): this feature is behind the |
Opera Android Full support 43 Full support 43 Full support 28 Disabled' From version 28: this feature is behind the |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 6.0 |
subgrid
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 71 Full support 71 Full support 69 Notes' Enabled by default in Firefox Nightly.
Disabled' From version 69: this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
See also
grid-template-columns
- CSS Grid Layout on MDN
- Article: CSS Grid: More flexibility with minmax()
- Article: Breaking Out with CSS Grid
Grid wrapper by Mozilla Contributors is licensed under CC-BY-SA 2.5.