• 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
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
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.
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>
it doesn’t matter in which unusual place I want to add the markup. <div class="wrapper"> <header class="mainheader"></header> <footer class="mainfooter"></footer> <div class="panel"></div> <div class="content"></div> </div>
we placed an item between row lines 5 and 6. Grid creates an implicit grid line for us. .wrapper { display: grid; grid-template-columns: 30% 5% 65%; grid-template-rows: 40px auto 20px auto; } .mainfooter { grid-column: 1 / 4; grid-row: 5 / 6; }
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.
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.
grid lines and not grid tracks. .wrapper { display: grid; grid-template-rows: 10px (row-header-start) auto (row-header-end) 10px (row-content-start) auto (row-content-end) 10px (row-panel-start) auto (row-panel-end) 10px (row-footer-start) auto (row-footer-end); }
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; }
property. A period “.” indicates that this grid cell is empty. .wrapper { display: grid; grid-template-rows: 10px auto 10px auto 10px auto 10px auto; grid-template-areas: "." "header" "." "content" "." "sidebar" "." "footer"; }
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>
part of the grid definition. This would create 4 200 pixel wide tracks, separated by a 20 pixel wide gutter track. grid-template-columns: repeat(4, 200px 20px);
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) 200px (gutter) 20px); } .content { grid-column: col 2 / span gutter 2; }
pattern of columns or rows the number of times specified before the comma. .wrapper { display: grid; grid-template-columns: repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr (gutter); grid-template-rows: auto repeat(4, (row) auto (gutter) 15px); }
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 named gutter. In the first row named row, spanning to the first line named gutter. .box1 { grid-column: col / span gutter 4; grid-row: row / span gutter; }
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>
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; }
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; } }
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; } }
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; } }
will be used as columns, preceded by a line named ‘col’ and those used as gutters, preceded by a line named ‘gutter’. .wrapper { display: grid; grid-template-columns: repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr (gutter); grid-template-rows: auto repeat(4, (row) auto (gutter) 15px); }
we will need in a Grid. Grid will create implicit row lines for extra content - but won’t add a gutter track for us. .wrapper { display: grid; grid-template-columns: repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr (gutter); grid-template-rows: auto repeat(4, (row) auto (gutter) 15px); }
number of times. This is currently not implemented. .wrapper { display: grid; grid-template-columns: repeat(11, (col) 4fr (gutter) 3.5fr ) (col) 4fr (gutter); grid-template-rows: auto repeat(auto, (row) auto (gutter) 15px); }
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>
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-template-columns: 1fr 10px 1fr; grid-template-rows: auto 10px auto; } .e { grid-column: 1 / 4; grid-row: 1; } .f { grid-column: 1; grid-row: 3; } .g { grid-column: 3; grid-row: 3; }
can then position the children of this element on the same grid their parent is placed on. .d{ grid-column: col 3 / span gutter 2; grid-row: row 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
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
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. Mozilla are currently implementing Grid in Firefox. There is a Polyfill under active development: https://github.com/ FremyCompany/css-grid-polyfill/