Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MirrorConf: Solving Layout Problems with CSS Gr...

MirrorConf: Solving Layout Problems with CSS Grid & Friends

A talk about some of the problems grid layout solves, and some of the things that might be to come in future.

Rachel Andrew

October 12, 2017
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

Transcript

  1. Rachel Andrew ▸ @rachelandrew on Twitter ▸ https://rachelandrew.co.uk ▸ Invited

    Expert to the CSS Working Group ▸ Google Developer Expert ▸ co-founder Perch and Perch Runway CMS - https://grabaperch.com
  2. .col { padding: 10px; margin-bottom: 1em; margin-left: 2.093333%; width: 6.20%;

    float: left; } .row::after { content: ""; display: block; clear: both; } .col.span2 { width: calc((6.20%*2) + 2.093333%); } A float based “grid” We have to give the items a width. By stacking these carefully sized items up we get the appearance of a grid. https://codepen.io/rachelandrew/pen/brjymK
  3. There is no grid. We made it look like there

    is a grid by the fact things line up.
  4. .wrapper .row { display: flex; flex-wrap: wrap; } .col {

    padding: 10px; margin-bottom: 1em; margin-left: 2.093333%; width: 6.20%; flex: 0 0 auto; } .col.span2 { width: calc((6.20%*2) + 2.093333%); } A flexbox “grid” Using the width as the flex-basis. https://codepen.io/rachelandrew/pen/KvBLbJ
  5. .wrapper { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-gap: 20px; }

    .col.span2 { grid-column: auto / span 2; } A Grid … grid No row wrappers. No sizing information on the items, just an instruction on how many columns to span. https://codepen.io/rachelandrew/pen/VzBOJW
  6. Grid container grid-column: 2 / span 4; 1fr 1fr 1fr

    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
  7. .wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px;

    } The fr unit With this track listing the available spaces divided into 4. https://codepen.io/rachelandrew/pen/BdeqoJ
  8. .wrapper { display: grid; grid-template-columns: 1fr 1fr 400px; grid-gap: 20px;

    } The fr unit Mix absolute length units and fr units. https://codepen.io/rachelandrew/pen/RZYZad
  9. .wrapper { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-gap: 20px; }

    The fr unit Creating a 12 column flexible grid with no percentage calculations. https://codepen.io/rachelandrew/pen/VzBOJW
  10. .panel { max-width: 800px; display: grid; grid-template-columns: 2fr 3fr; grid-auto-rows:

    minmax(200px, auto); grid-gap: 1px; } minmax() Row tracks will be 200 pixels tall unless there is more content, in which case they will grow as the max is auto. https://codepen.io/rachelandrew/pen/Mvqvbm
  11. figure { display: grid; grid-template-rows: 1fr minmax(100px, auto); } figure

    img { grid-row: 1 / -1; grid-column: 1; object-fit: cover; height: 100%; width: 100%; } figure figcaption { grid-row: 2; grid-column: 1; padding: 20px; } Nested grids The figure is a grid item that also becomes a grid container, so we can make use of the ability to layer items on the grid. https://codepen.io/rachelandrew/pen/xLePZY
  12. .wrapper { display: grid; grid-template-columns: min-content 1fr 1fr; grid-gap: 20px;

    } min-content Roughly, the inline size that would fit around its contents if all soft wrap opportunities within the box were taken. https://codepen.io/rachelandrew/pen/xLejpK
  13. .wrapper { display: grid; grid-template-columns: max-content 1fr 1fr; grid-gap: 20px;

    } max-content Usually the narrowest inline size it could take while fitting around its contents if none of the soft wrap opportunities within the box were taken. https://codepen.io/rachelandrew/pen/KvYRZB
  14. .wrapper { display: grid; grid-template-columns: fit- content(200px) fit-content(200px) 1fr; grid-gap:

    20px; } fit-content If the available space in a given axis is finite, equal to min(max-content size, max(min-content size,stretch-fit size)). Otherwise, equal to the max-content size in that axis. https://codepen.io/rachelandrew/pen/NvLvRG
  15. .grid > div { float: left; } .grid { display:

    grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } .grid > div { // I’m now a grid item, and act as if I am not floated! } Float & clear properties Have no effect on a grid item. You can float an item for old browsers then try it into a grid item for new ones. https://codepen.io/rachelandrew/pen/NvmMOM
  16. .grid > div { display: inline-block; } .grid { display:

    grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } .grid > div { // I’m now a grid item, inline-block behaviour such as preserving white space is gone. } Display: inline-block An inline-block item that becomes a grid item loses any attributes that would apply when it was inline-block. https://codepen.io/rachelandrew/pen/LjvmXG
  17. .grid > div { display: table-cell; vertical-align: top; } .grid

    { border-spacing: 10px; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } Display: table Anonymous element creation does not happen if an item with display: table-cell or another table-* property becomes a grid item. https://codepen.io/rachelandrew/pen/OjGZaO
  18. .grid > div { display: inline-block; vertical-align: top; } .grid

    { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); width: 500px; } vertical-align Can be used as a fallback for the Box Alignment properties in inline-block or table layout and stops applying when the item becomes a grid item. https://codepen.io/rachelandrew/pen/NvmMEM
  19. .grid { column-count: 3; width: 500px; } .grid { display:

    grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); } Multiple-column layout Can be used as a fallback for some grid layouts, and the column-* properties cease to apply once the container becomes a grid container. https://codepen.io/rachelandrew/pen/MvRGzL
  20. .grid { display: flex; align-items: center; width: 500px; height: 200px;

    border: 1px dotted #694486; } .grid > div { flex: 1; } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, auto); } Flex Layout Flexbox can also be used as a fallback, making things easier as they both use the Box Alignment properties. https://codepen.io/rachelandrew/pen/MvRGzx
  21. .grid > div { float: left; width: 33.333%; } .grid

    { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); width: 500px; } A problem! The width set to make the floated item the right size to fit into our layout will be interpreted on the grid item as a percentage of the grid track.
  22. .grid > div { float: left; width: 33.333%; } @supports

    (display: grid) { .grid > div { width: auto; } } .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); width: 500px; } Feature Queries Test for support of a property and value. Inside the Feature Query add code only for browsers that claim support. https://codepen.io/rachelandrew/pen/ayxGPz
  23. .grid { display: grid; max-width: 960px; margin: 0 auto; grid-template-columns:

    repeat(3, 1fr); grid-gap: 20px; } CSS Grid Creating a three column layout on the parent element with fr units.
  24. .card { display: flex; flex-direction: column; } .card .inner {

    flex: 1; } Make the card a flex item Allow the inner to grow, it pushes the footer down to the bottom of the cards https://codepen.io/rachelandrew/pen/XgdydE
  25. .card { border: 4px solid rgb(24,154,153); background-color: #fff; grid-row: auto

    / span 4; display: subgrid; } display: subgrid The card is a direct child of the grid so needs to span four rows of the grid to make room for the four rows in the subgridded internals.
 
 display: subgrid means the card now uses the tracks of the parent grid. https://codepen.io/rachelandrew/pen/ZyWmVM
  26. Subgrid Links & Thoughts ▸ https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the- css-grid-specification/ ▸ https://github.com/w3c/csswg-drafts/issues/958 ▸

    https://github.com/rachelandrew/cssgrid-ama/issues/13 ▸ http://meyerweb.com/eric/thoughts/2016/01/15/subgrids-considered-essential/
  27. .grid { display: grid; grid-gap: 40px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    grid-auto-rows: minmax(100px, auto); } .grid > div:nth-child(1) { grid-row-end: span 2; } .grid > div:nth-child(2) { grid-row-end: span 3; } .grid > div:nth-child(4) { grid-row-end: span 3; } .grid > div:nth-child(5) { grid-column-end: span 2; } Using auto-placement Allowing items to auto-place with certain items spanning rows and columns. https://codepen.io/rachelandrew/pen/NvmZeR
  28. .grid { display: grid; grid-gap: 40px; grid-template-columns: repeat(auto- fill, minmax(160px,

    1fr)); grid-auto-rows: minmax(100px, auto); grid-auto-flow: dense; } Set auto-flow to dense Grid will backfill gaps taking items out of document order visually. https://codepen.io/rachelandrew/pen/WEWqWR
  29. Grid Resources ▸ Visit Grid by Example for worked examples,

    patterns with fallbacks, and a free video tutorial: https://gridbyexample.com ▸ I created a huge set of guides for MDN: 
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout ▸ Over 5 years of grid thoughts on my site at:
 https://rachelandrew.co.uk/archives/tag/cssgrid ▸ GridBugs! I’m collecting and trying to get fixed interop issues:
 https://github.com/rachelandrew/gridbugs