An Event Apart SF: CSS Grid Layout
-
Upload
rachel-andrew -
Category
Technology
-
view
1.241 -
download
1
Transcript of An Event Apart SF: CSS Grid Layout
![Page 1: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/1.jpg)
CSS Grid Layout
Rachel Andrew
An Event Apart San Francisco, November 2015
![Page 2: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/2.jpg)
Rachel Andrew
http://rachelandrew.co.uk
@rachelandrew
http://grabaperch.com
![Page 3: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/3.jpg)
CSS in 2015 is amazing.
![Page 4: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/4.jpg)
The trouble with CSS layout
• Floats and clearfix hacks
• Absolute positioning means elements are taken out of document flow and risk overlaps
• Redundant markup and positioning oddities with display: table
• White space issues with inline-block
![Page 5: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/5.jpg)
https://www.flickr.com/photos/zervas/2810241612
Flexbox?
![Page 6: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/6.jpg)
Seeing Flexbox as the silver bullet for layout issues is likely to lead us down
another path of layout hacks.
![Page 7: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/7.jpg)
The cost of taming layout methods
• Developer hours spent learning non-obvious concepts.
• Compromises in terms of document semantics in order to achieve responsive layouts.
• Needing to lean on frameworks to help with complex math.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
![Page 8: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/8.jpg)
We need a designed for purpose layout system for the sites and applications we develop today.
![Page 9: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/9.jpg)
CSS Grid Layout
![Page 10: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/10.jpg)
Our HTML consists of a div with a class of wrapper and two child elements, a and b.
<div class="wrapper"> <div class="a">A</div> <div class="b">B</div> </div>
![Page 11: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/11.jpg)
To create a grid we use a new value of the display property.
display: grid
.wrapper { display: grid;
}
![Page 12: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/12.jpg)
We describe the grid using the new properties:
grid-template-columns
grid-template-rows
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: auto auto; }
![Page 13: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/13.jpg)
We position items using the new properties:
grid-column-startgrid-column-endgrid-row-startgrid-row-end
.a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
![Page 14: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/14.jpg)
To position an item bottom centre, I start at column line 2 and end at column line 3.
.b { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; }
![Page 15: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/15.jpg)
To span more tracks we just change the end row or column line.
.b { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; }
http://bit.ly/aeasf-simple
![Page 16: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/16.jpg)
The longhand for line-based placement means up to 4 properties to position each element. .a {
grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
.b { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; }
![Page 17: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/17.jpg)
Declare start and end values with grid-column and grid-row.
Values are separated by a / symbol.
.a { grid-column: 1 / 2; grid-row: 1 / 2; }
.b { grid-column: 2 / 4; grid-row: 2 / 3; }
![Page 18: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/18.jpg)
Declare all 4 values using the grid-area property.
.a { grid-area: 1 / 1 / 2 / 2; }
.b { grid-area: 2 / 2 / 3 / 4; }
![Page 19: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/19.jpg)
Grid lines relate to writing mode. In a right to left language such as
Arabic the first column line is the right-hand line.
![Page 20: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/20.jpg)
Grid Terminology
![Page 21: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/21.jpg)
Grid Lines
Lines can be horizontal or vertical. They are referred to by number and can be
named.
Highlighted is Column Line 2.
![Page 22: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/22.jpg)
Grid Track
A Grid Track is the space between two Grid Lines. Tracks can be horizontal or
vertical (rows or columns).
The highlighted Grid Track is between Row Lines 2 and 3.
![Page 23: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/23.jpg)
Grid Cell
The smallest unit on our grid, a Grid Cell is the space between four Grid Lines. It’s
just like a table cell.
The highlighted Grid Cell is between row lines 2 and 3 and column lines 2 and 3.
![Page 24: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/24.jpg)
Grid Area
Any area of the Grid bound by 4 Grid Lines. It can contain many Grid Cells.
The highlighted Grid Area is between row lines 1 and 3, column lines 2 and 4.
![Page 25: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/25.jpg)
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
![Page 26: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/26.jpg)
Line-based placement
![Page 27: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/27.jpg)
![Page 28: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/28.jpg)
The HTML around my page content.
The various areas of my page are child elements of a div with a class of wrapper.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
</div>
![Page 29: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/29.jpg)
![Page 30: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/30.jpg)
Declaring a grid on wrapper.
The grid has two columns and two rows, making 3 column lines and 3 row lines.
.wrapper { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 2fr 4fr; grid-template-rows: auto auto; grid-column-gap: 2em; grid-row-gap: 20px; }
![Page 31: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/31.jpg)
The fr unit
• Assigns to the track a fraction of the available space in the container.
• Before fractions are calculated the space assigned to any fixed width tracks and gaps is removed.
• Acts in a similar way to flex-grow in Flexbox.
![Page 32: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/32.jpg)
Grid Layout
I am creating three grid column tracks, all 1fr in width.
This gives me three equally sized column tracks.
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
![Page 33: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/33.jpg)
Grid Layout
If I create the first column as 600 pixels and then have two 1fr columns the 600 pixel track is removed from the available space and the remainder is distributed equally between the two columns.
.wrapper { display: grid; grid-template-columns: 600px 1fr 1fr; }
![Page 34: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/34.jpg)
Grid Layout
With a 600 pixel column, a 1fr and a 3fr column. The 600 pixels is removed from the available space then the remaining space is divided by 4.
The 1fr column gets 25% and the 3fr column 75%.
.wrapper { display: grid; grid-template-columns: 600px 1fr 3fr; }
![Page 35: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/35.jpg)
http://alistapart.com/article/holygrail
Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance.
![Page 36: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/36.jpg)
Grid Layout
CSS Grid “Holy Grail”. //css
.wrapper { display: grid; grid-template-columns: 300px 1fr 300px; grid-template-rows: auto; grid-column-gap: 20px; }
.header { grid-column: 1 / 4; }
.content { grid-column: 2 / 3; grid-row: 2 / 3; }
.side1 { grid-column: 1 / 2; grid-row: 2 / 3; }
.side2 { grid-column: 3 / 4; grid-row: 2 / 3; }
.footer { grid-column: 1 / 4; grid-row: 3 / 4; }
//html <div class="wrapper"> <header class="header">This is the header</header> <article class="content"></article> <div class="side1"></div> <div class="side2"></div> <footer class="footer"></div> </div>
![Page 37: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/37.jpg)
![Page 38: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/38.jpg)
Declaring a grid on wrapper.
The grid has two columns and two rows, making 3 column lines and 3 row lines.
.wrapper { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 2fr 4fr; grid-template-rows: auto auto; grid-column-gap: 2em; grid-row-gap: 20px; }
![Page 39: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/39.jpg)
![Page 40: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/40.jpg)
Positioning our elements using the grid-column and grid-row shorthand.
This is all we need to do to create our layout.
.mainheader { grid-column: 1 / 3; grid-row: 1 / 2; }
.panel { grid-column: 1 / 2; grid-row: 2 / 3; }
.content { grid-column: 2 / 3; grid-row: 2 / 3; }
![Page 41: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/41.jpg)
![Page 43: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/43.jpg)
I can add a footer to this layout.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
<footer class="mainfooter"></footer>
</div>
![Page 44: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/44.jpg)
Positioning the footer between row lines three and four.
.mainfooter { grid-column: 1 / 3; grid-row: 3 / 4; }
![Page 46: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/46.jpg)
Our grid only has 3 row lines specified - yet we placed an item between row lines 3 and 4.
Grid creates an implicit grid line for us.
.wrapper { display: grid; grid-template-columns: 2fr 4fr; grid-template-rows: auto auto; grid-column-gap: 2em; grid-row-gap: 20px; }
.mainfooter { grid-column: 1 / 3; grid-row: 3 / 4; }
![Page 47: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/47.jpg)
Grid lines can be explicit or implicit
• Explicit grid lines are those specified using grid-template-rows or grid-template-columns.
• Implicit lines are created when you place something into a row or column track outside of the explicit grid.
• Default behaviour is those tracks are auto sized. You can specify a size with the grid-auto-columns and grid-auto-rows properties.
![Page 48: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/48.jpg)
For many layouts you may be able to not specify grid-template-rows at all. Grid will create rows as you position content.
.wrapper { display: grid; grid-template-columns: 2fr 4fr; grid-column-gap: 2em; grid-row-gap: 20px; }
![Page 49: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/49.jpg)
Grid is “table like” however …
• Unlike a table for layout Grid does not rely on your content being a particular order in the source.
• Being entirely described in CSS we can move things around the Grid at different breakpoints, introduce or redefine a Grid for any breakpoint.
![Page 50: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/50.jpg)
Using Grid to order the page elements in a single column for narrow screen widths.
.wrapper { display: grid; grid-row-gap: 10px; } .mainheader { grid-row: 1 / 2; }
.content { grid-row: 2 / 3; }
.panel { grid-row: 3 / 4; }
.mainfooter { grid-row: 4 / 5; }
![Page 52: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/52.jpg)
Redefine the Grid at min-width 550 pixels.
Position items as in the earlier example.
@media (min-width: 550px) { .wrapper { grid-template-columns: 2fr 4fr; grid-column-gap: 2em; grid-row-gap: 20px; } .mainheader { grid-column: 1 / 3; grid-row: 1 / 2; } .panel { grid-column: 1 / 2; grid-row: 2 / 3; } .content { grid-column: 2 / 3; grid-row: 2 / 3; } .mainfooter { grid-column: 1 / 3; grid-row: 3 / 4; } }
![Page 53: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/53.jpg)
Named Grid Lines
![Page 55: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/55.jpg)
Name lines with the name in square brackets.
Remember we are naming grid lines and not grid tracks. .wrapper {
display: grid; grid-row-gap: 10px; grid-template-rows: [row-header-start] auto [row-content-start] auto [row-panel-start] auto [row-footer-start] auto [row-footer-end]; }
![Page 56: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/56.jpg)
Here we are positioning based on line numbers.
.mainheader { grid-row: 1 / 2; }
.content { grid-row: 2 / 3; }
.panel { grid-row: 3 / 4; }
.mainfooter { grid-row: 4 / 5; }
![Page 57: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/57.jpg)
Here we are positioning by named lines.
.mainheader { grid-row: row-header-start; }
.content { grid-row: row-content-start; }
.panel { grid-row: row-panel-start; }
.mainfooter { grid-row: row-footer-start; }
![Page 58: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/58.jpg)
Named Areas
![Page 60: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/60.jpg)
We assign a name to the elements on our page.
I am doing this outside of any Media Queries.
.mainheader { grid-area: header; }
.content { grid-area: content; }
.panel { grid-area: sidebar; }
.mainfooter { grid-area: footer; }
![Page 61: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/61.jpg)
Describe the layout on the parent element using the grid-template-areas property.
.wrapper { display: grid; grid-row-gap: 10px; grid-template-areas: "header" "content" "sidebar" "footer"; }
![Page 62: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/62.jpg)
![Page 63: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/63.jpg)
![Page 64: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/64.jpg)
Redefining the template areas for the wider layout. @media (min-width: 550px) {
.wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" "footer footer" }
}
![Page 65: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/65.jpg)
![Page 66: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/66.jpg)
![Page 67: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/67.jpg)
Repeating the name of an area causes the area to span across those grid cells.
This can be seen in the header and footer of this layout.
@media (min-width: 550px) {
.wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" "footer footer" }
}
![Page 68: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/68.jpg)
Repeating the name of an area causes the area to span across those grid cells.
This can be seen in the header and footer of this layout.
@media (min-width: 550px) {
.wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" " . footer" }
}
![Page 69: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/69.jpg)
![Page 70: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/70.jpg)
Implicit Named Grid Lines
![Page 71: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/71.jpg)
Named grid areas create four implicit named lines. You can use these in the same way as lines you have explicitly named.
.wrapper { .wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" "footer footer" } }
.test { z-index: 100; background-color: red; grid-column: content-start / content-end; grid-row: content-start / footer-end; }
![Page 72: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/72.jpg)
![Page 73: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/73.jpg)
Items on the Grid can be layered using the z-index property.
![Page 74: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/74.jpg)
A 12 column, flexible grid
![Page 75: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/75.jpg)
The Bootstrap grid, and those in other frameworks relies on our describing the layout in the markup.
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>
<!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
![Page 76: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/76.jpg)
With CSS Grid Layout we describe the layout in the CSS and can redefine that description at any breakpoint.
![Page 78: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/78.jpg)
You can use the repeat keyword to repeat all or part of the grid definition.
This would create 4 200 pixel wide tracks, separated by a 100 pixel wide track.
grid-template-columns: repeat(4, 200px 100px);
![Page 79: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/79.jpg)
We can give multiple grid lines the same name.
This means we can use the span keyword to span n number of lines, rather than specifying a specific grid line.
.wrapper { grid-template-columns: repeat(4, [col-a] 200px [col-b] 100px); }
.content { grid-column: col-a 2 / span 2; }
.aside { grid-column: col-a 2 / span col-b 2; }
![Page 80: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/80.jpg)
The markup used to create the Grid using the Skeleton framework.
Like the Bootstrap Grid and other similar frameworks it requires classes that describe the grid to be added to the markup.
<div class="container"> <h1>Skeleton Grid</h1> <div class="example-grid"> <div class="row"> <div class="four columns">Four columns</div> <div class="four columns">Four columns</div> <div class="four columns">Four columns</div> </div> <div class="row"> <div class="eight columns">Eight columns</div> <div class="four columns">Four columns</div> </div> <div class="row"> <div class="three columns">Three columns</div> <div class="three columns">Three columns</div> <div class="three columns">Three columns</div> <div class="three columns">Three columns</div> </div> <div class="row"> <div class="six columns">Six columns</div> <div class="six columns">Six columns</div> </div> </div>
![Page 81: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/81.jpg)
![Page 82: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/82.jpg)
When using CSS Grid Layout we have no need to describe our grid in markup.
<div class="wrapper skeleton"> <h1 class="header">CSS Grid Layout Version</h1> <div class="box1">Four columns</div> <div class="box2">Four columns</div> <div class="box3">Four columns</div> <div class="box4">Eight columns</div> <div class="box5">Four columns</div> <div class="box6">Three columns</div> <div class="box7">Three columns</div> <div class="box8">Three columns</div> <div class="box9">Three columns</div> <div class="box10">Six columns</div> <div class="box11">Six columns</div> </div>
![Page 83: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/83.jpg)
Defining the 12 column grid.
The repeat keyword repeats the pattern of columns or rows the number of times specified before the comma.
.wrapper { display: grid; grid-template-columns: repeat(12, [col] 1fr ); grid-template-rows: repeat(5, [row] auto) ; grid-column-gap: 1em; grid-row-gap: 15px; }
![Page 84: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/84.jpg)
Placing box1 on the grid.
Multiple lines have the same name. This means we can use the span keyword. Here I place box1 starting at the first line named col, spanning to the 4th line.
The box is placed in the first line named row and spans 1 line - the default.
.box1 { grid-column: col / span 4; grid-row: row ; }
![Page 85: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/85.jpg)
Placing box8 on the grid.
Starting on column line 7, spanning 3 lines.
In the 3rd row named row, spanning 1 line.
.box8 { grid-column: col 7 / span 3; grid-row: row 3 ; }
![Page 86: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/86.jpg)
![Page 87: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/87.jpg)
With Grid Layout we can easily span rows just like columns.
.box1b { grid-column: col / span 4; grid-row: row / span 2; }
.box2b { grid-column: col 5 / span 4; grid-row: row / span 3; }
![Page 89: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/89.jpg)
The header and footer span the full grid.
The content and panel display side by side.
.mainheader { grid-column: col / span 12; grid-row: row ; }
.mainfooter { grid-column: col / span 12; grid-row: row 3 ; }
.content { grid-column: col 5 / span 8; grid-row: row 2 ; }
.panel { grid-column: col / span 4; grid-row: row 2 ; }
![Page 91: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/91.jpg)
The header and footer span the full grid.
The content and panel display side by side.
.mainheader { grid-column: col / span 12; grid-row: row ; }
.mainfooter { grid-column: col / span 12; grid-row: row 3 ; }
.content { grid-column: col 5 / span 8; grid-row: row 2 ; }
.panel { grid-column: col / span 4; grid-row: row 2 ; }
![Page 92: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/92.jpg)
I change three values to make our panel extend to the foot of the page.
.mainheader { grid-column: col / span 12; grid-row: row ; }
.mainfooter { grid-column: col 5 / span 8; grid-row: row 3 ; }
.content { grid-column: col 5 / span 8; grid-row: row 2 ; }
.panel { grid-column: col / span 4; grid-row: row 2 / span 2 ; }
![Page 93: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/93.jpg)
![Page 94: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/94.jpg)
Grid Item Placement Algorithm
![Page 95: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/95.jpg)
http://dev.w3.org/csswg/css-grid/#grid-item-placement-algorithm
“The following grid item placement algorithm resolves automatic positions of grid items into definite positions, ensuring that every grid item has a well-defined grid area to lay out into.”
![Page 96: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/96.jpg)
![Page 97: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/97.jpg)
My markup is an unordered list with a class of wrapper.
The first list item contains text. The rest an image.
Two list items have a class of ‘wide’.
<ul class="wrapper"> <li class="text"><p>…</p></li> <li><img src="../images/balloon1.jpg" alt="hot air balloon" /> <p>Balloons 1</p></li> <li><img src="../images/balloon2.jpg" alt="hot air balloon" /> <p>Balloons 2</p></li> <li><img src="../images/balloon3.jpg" alt="hot air balloon" /> <p>Balloons 3</p></li> <li class="wide"><img src="../images/balloon4.jpg" alt="hot air balloon" /> <p>Balloons 4</p></li> <li><img src="../images/balloon5.jpg" alt="hot air balloon" /> <p>Balloons 5</p></li> <li><img src="../images/balloon6.jpg" alt="hot air balloon" /> <p>Balloons 6</p></li> <li class="wide"><img src="../images/balloon7.jpg" alt="hot air balloon" /> <p>Balloons 7</p></li> <li><img src="../images/balloon8.jpg" alt="hot air balloon" /> <p>Balloons 8</p></li> </ul>
![Page 98: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/98.jpg)
![Page 99: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/99.jpg)
Narrow screen layout, before any media queries.
A single column, single row grid.
Grid layout will create implicit rows for any additional list items.
.wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: dense; }
![Page 100: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/100.jpg)
![Page 101: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/101.jpg)
At a 460 pixel breakpoint we redefine the grid to have two equal columns.
With grid-auto-flow set to dense gaps are not left in the grid if they can be filled.
@media (min-width: 460px) { .wrapper { grid-template-columns: 1fr 1fr; } .text { grid-column: 1 / 3; } .wide { grid-column: auto / span 2; } }
![Page 102: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/102.jpg)
![Page 103: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/103.jpg)
We move to 4 equal columns at 660 pixels.
I position the li with a class of text between column lines 2 and 4, and row lines 1 and 3.
@media (min-width: 660px) { .wrapper { grid-template-columns: 1fr 1fr 1fr 1fr; }
.text { grid-column: 2 / 4; grid-row: 1 / 3; } }
![Page 105: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/105.jpg)
The complete CSS for this grid.
.wrapper { display: grid; max-width: 960px; grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: dense; }
@media (min-width: 460px) { .wrapper { grid-template-columns: 1fr 1fr; } .text { grid-column: 1 / 3; } .wide { grid-column: auto / span 2; } }
@media (min-width: 660px) { .wrapper { grid-template-columns: 1fr 1fr 1fr 1fr; } .text { grid-column: 2 / 4; grid-row: 1 / 3; } }
![Page 106: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/106.jpg)
We change the value of grid-auto-flow to sparse.
.wrapper { display: grid; max-width: 960px; grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: sparse; }
@media (min-width: 460px) { .wrapper { grid-template-columns: 1fr 1fr; } .text { grid-column: 1 / 3; } .wide { grid-column: auto / span 2; } }
@media (min-width: 660px) { .wrapper { grid-template-columns: 1fr 1fr 1fr 1fr; } .text { grid-column: 2 / 4; grid-row: 1 / 3; } }
![Page 107: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/107.jpg)
![Page 108: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/108.jpg)
Grid and the Box Alignment Module
![Page 109: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/109.jpg)
CSS Box Alignment Module Level 3
“This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.” - https://drafts.csswg.org/css-align/
![Page 110: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/110.jpg)
Grid Layout
Creating a grid with the align-items property set to centre.
All items will be centered inside their grid area.
.wrapper { display: grid; align-items: center; grid-template-columns: repeat(5, 150px 10px) 150px; grid-template-rows: 150px 10px 150px 10px 150px 10px 150px; } .a { grid-column: 1 / 4; grid-row: 1 / 4; } .b { grid-column: 5 / 8; grid-row: 1 / 4; } .c { grid-column: 1 / 4; grid-row: 5 / 10; } .d { grid-column: 5 / 8; grid-row: 5 / 10; } .e { grid-column: 9 / 12; grid-row: 1 / 10; }
![Page 112: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/112.jpg)
Grid Layout
Creating a grid with the justify-items property set to centre.
All items will be centered horizontally inside their grid area.
.wrapper { display: grid; justify-items: center; grid-template-columns: repeat(5, 150px 10px) 150px; grid-template-rows: 150px 10px 150px 10px 150px 10px 150px; } .a { grid-column: 1 / 4; grid-row: 1 / 4; } .b { grid-column: 5 / 8; grid-row: 1 / 4; } .c { grid-column: 1 / 4; grid-row: 5 / 10; } .d { grid-column: 5 / 8; grid-row: 5 / 10; } .e { grid-column: 9 / 12; grid-row: 1 / 10; }
![Page 114: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/114.jpg)
Grid Layout
As with flexbox we can use align-self and justify-self to target individual grid items.
.a { grid-column: 1 / 4; grid-row: 1 / 4; align-self: stretch; } .b { grid-column: 5 / 8; grid-row: 1 / 4; align-self: end; } .c { grid-column: 1 / 4; grid-row: 5 / 10; align-self: start; } .d { grid-column: 5 / 8; grid-row: 5 / 10; align-self: center; } .e { grid-column: 9 / 12; grid-row: 1 / 10; }
![Page 116: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/116.jpg)
Grid and Accessibility
![Page 117: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/117.jpg)
With great power comes responsibility.
![Page 118: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/118.jpg)
Power and responsibility
• Good = creating the most accessible source order and using Grid or Flexbox to get the optimal display for each device.
• Bad = using Grid or Flexbox as an excuse to forget about the source.
• Terrible - stripping out semantic elements to make everything a grid or flex item.
![Page 119: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/119.jpg)
https://drafts.csswg.org/css-grid/#source-independence
Grid item placement and reordering must not be used as a substitute for correct source ordering, as that can ruin the accessibility of the document.
![Page 120: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/120.jpg)
http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html
![Page 121: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/121.jpg)
https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/
![Page 122: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/122.jpg)
Nested Grids and Subgrids
![Page 123: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/123.jpg)
In this markup the boxes e, f and g are children of the element with a class of d.
<div class="wrapper"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d"> <div class="box e">E</div> <div class="box f">F</div> <div class="box g">G</div> </div> </div>
![Page 124: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/124.jpg)
I have declared a grid on the wrapper div, and positioned the immediate children - the elements with classes a to d.
.wrapper { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, [col] 150px); repeat(2, [row] auto); } .a { grid-column: col / span 2; grid-row: row; } .b { grid-column: col 3 / span 2; grid-row: row; } .c { grid-column: col / span 2; grid-row: row 2; } .d{ grid-column: col 3 / span 2; grid-row: row 2; }
![Page 125: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/125.jpg)
![Page 126: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/126.jpg)
To make box d a grid itself I declare a grid as normal then position the children of this element.
They take their grid lines from the grid declared on box d.
.d{ grid-column: col 3 / span gutter 2; grid-row: row 2; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; }
.e { grid-column: 1 / 3; grid-row: 1; }
.f { grid-column: 1; grid-row: 2; }
.g { grid-column: 2; grid-row: 2; }
![Page 127: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/127.jpg)
![Page 128: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/128.jpg)
Declaring a subgrid
![Page 129: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/129.jpg)
In our existing layout we are creating a completely new grid on box d.
.d{ grid-column: col 3 / span 2; grid-row: row 2; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; }
![Page 130: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/130.jpg)
If we declare that this grid is a subgrid, we can then position the children of this element on the same grid their parent is placed on. .d{
grid-column: col 3 / span 2; grid-row: row 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
![Page 131: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/131.jpg)
http://dev.w3.org/csswg/css-grid/
“The following features are at-risk, and may be dropped during the CR period:
the subgrid value of grid-template-columns and grid-template-rows, and its component parts individually”
![Page 132: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/132.jpg)
Without subgrid we create the potential for accessibility problems. Authors may remove semantic markup in order to use grid layout.
![Page 133: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/133.jpg)
Grid needs your feedback!
Enable Experimental Web Platform Features in Chrome.
Play with my examples and think up ways you would use Grid.
Follow the CSS Grid conversation on www-style by searching for [css-grid].
See the current issues in the Editor’s Draft http://dev.w3.org/csswg/css-grid/#issues-index
![Page 134: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/134.jpg)
![Page 135: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/135.jpg)
Browser SupportAll my examples work in Chrome unprefixed - you need to enable the Experimental Web Platform Features flag.
You can also use Webkit nightlies, with the -webkit prefix.
The work in Blink and Webkit is being done by Igalia, sponsored by Bloomberg.
IE10 and up has support for the old syntax, with an -ms prefix.
Grid is on the Edge backlog, marked as High Priority.
Mozilla are currently implementing Grid in Firefox. Some examples work in Firefox Nightlies.
There is a Polyfill under active development: https://github.com/FremyCompany/css-grid-polyfill/
![Page 136: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/136.jpg)
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
![Page 137: An Event Apart SF: CSS Grid Layout](https://reader036.fdocuments.us/reader036/viewer/2022081511/58728c0b1a28ab36118b534f/html5/thumbnails/137.jpg)
Thank you!
@rachelandrew