An Event Apart: “Graduating to Grid”

Rachel Andrew speaking at An Event Apart Seattle 2018 on April 2, 2018.

When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. Now that the excitement of launch has passed, Rachel Andrew will take a look at what went right or wrong in these first few months, and offer help to those struggling to transition away from legacy methods. In a practical, example-packed hour, Rachel will help give you the confidence and practical skills to fully embrace Grid layout. We’ll compare common framework patterns to new Grid code, and learn how to create a workflow that is right up to date—a workflow grounded in new CSS, yet able to care for old browsers and ensure a good experience for their users.

Notes

  • If you want to have confidence in what you’re doing, you need to understand CSS
  • Understanding CSS is not about learning every property and value by heart (my main skill is “can use a search engine”)
  • Cascading Style Sheets
    • If you are going to know CSS, you need to understand the cascade
    • Inheritance — which properties will inherit values from their parent
    • Specificity — which rule wins when two things could apply to the same element
  • Block and inline dimensions
    • In horizontal writing mode — block dimension or axis is vertical, inline dimension or axis in horizontal
    • In vertical writing mode — block dimension or axis is horizontal, inline dimension or axis in vertical
    • Grid layout in horizontal writing mode — block/column axis is vertical, inline/row axis in horizontal
    • Flex layout in horizontal writing mode
      • flex-direction: row — main axis is horizontal, cross axis is vertical
      • flex-direction: column — main axis is vertical, cross axis is horizontal
  • Sizing matters
    • In float-based layouts, everything is sized in percentages
    • Percentages
      • Ugly
      • Easy to understand
      • If they total more than 100% bad things happen
      • Can be converted from an ideal pixel size using a straightforward calculation
    • You can fake grid in flexbox the same way it is faked with floats, which is a bit of an improvement, but it’s still not a grid — you are creating inflexible flex items
  • Past layout methods create the appearance of a grid, by lining things up
  • Understanding sizing is key if you want to understand all this new stuff
  • CSS Intrinsic and Extrinsic Sizing
  • .box { width: min-content; }
    • Text takes all the soft wrapping opportunities it can, text becomes as small as possible
  • .box { width: max-content; }
    • Maximum size if text is not wrapped
    • Will overflow parent container
  • Flexbox is starting from max-content and taking space away — Grid starting at min-content and adding space
  • grid-template-columns: repeat(4, fit-content(15ch));
    • Will make 15 characters an upper limit
  • “In the end, we discovered that a column-based grid wasn’t actually needed. Since Grid allows you to create a custom grid to match whatever layout you have, we didn’t need to force it into 12 columns. Instead, we created CSS Grid objects for some of the common layout patterns in the designs.” — Rebuilding Slack.com
  • This is not exciting, but it will let you do exciting things
  • More capability and flexibility means more to learn
  • It is all just lines
    • With all the different complex ways of doing things, it all comes down to lines
  • If you name your grid lines content-start and content-end, you automatically get a named area called content 
    • grid {
  display: grid;
  grid-template-columns: 1fr [content-start] 1fr 1fr 1fr [content-end] 1fr;
  grid-template-rows: 100px [content-start] 100px 100px [content-end] 100px;
}
.item {
  grid-area: content;
}
    • grid-area: content; is the same as:
      • grid-column: content-start / content-end; grid-row: content-start / content-end;
      • grid-area: content / content / content / content;
      • grid-area: content / content / content;
      • grid-area: content / content;
  • You have a real choice for the first time
    • What would be the best method to achieve this design pattern?
    • Ask “Could we solve this problem with a new design pattern?”, instead of “which patterns does our framework give us to use?”
  • Old CSS in your project doesn’t mean you can’t use new CSS
    • This is where understanding CSS comes in really useful (the cascade, etc.)
  • Don’t forget other layout methods still exist
  • You don’t need a grid-shaped hammer for every layout task
    • Just make sure you’re using the right things in the right places
  • Off-the-shelf frameworks are designed to solve generic problems
    • Do you want your project to inherit the CSS issues of the rest of the world?
    • Build your own framework (framework doesn’t mean “all-encompassing behemoth”)
    • Solving your specific problems only will result in lighter, easier to understand code
  • Working with less capable browsers (these may not always be old browsers)
    • Building confidence in your CSS skills will help you to make your case to use newer methods
    • It’s okay for certain browsers to not receive all of the new features
    • IE10 & 11 have the -ms prefixed older version of grid layout
    • For other desktop browsers supporting the last 2 versions is common
  • Many browsers without support for Grid and other new CSS at this point are mobile browsers
    • Many of the browsers without support are most popular in areas where data is expensive or devices less powerful
  • Stop looking for polyfills and shims. They will make the experience worse for less capable browsers and devices
    • Using polyfill misses the point of these new layout methods
  • Making the web available for everyone is key, it has to be
  • Using Grid rather than loading a big framework can help create a better experience even for browsers that don’t support Grid
  • Feature Queries — use CSS to ask if the browser supports a feature before using it
  • Create complex layouts for browsers that support them with a few lines of CSS
  • Making the web available to everyone — That’s exciting

Speaker Links and Resources

Related Links