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

Momma's got a brand-new grid.

Mary Baum
October 14, 2017

Momma's got a brand-new grid.

Version 1.1

Updated with a few more slides that, ahem, should have been in the original.

Mary Baum

October 14, 2017
Tweet

More Decks by Mary Baum

Other Decks in Design

Transcript

  1. What is it? Where do we use it? Does it

    work with Flexbox? How to get started?
  2. Grids of posts ... instead of Flexbox; instead of floats;

    instead of block and inline- block;
  3. How about inside a post? For this theme only, 


    I scrapped the image-gallery plugins.
  4. .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 200px 2fr 20vw

    20rem; grid-template-rows: repeat(4, 200px); background-color: #cf0; color: #ff5; } .box { background: #09f; color: #fff; border-radius: 5px; padding: 20px; font: normal 300 3rem/1 montserrat; } .a { border-radius: 200%; grid-column: 1; grid-row: 2; margin: 2.5rem; padding: 2rem 1rem; text-align: center; } .b { grid-column: 4 ; grid-row: 1 / 5; } .c { grid-column: 1 / 3 ; grid-row: 3 / 4 ; } .d { grid-column: 2; grid-row: 2; } .e { grid-column: 3 / 4; grid-row: 3 / 5; } https://codepen.io/marybaum/pen/bodZbe