Responsive layouts

Flexbox and CSS Grid

About me

  • Laurel Bruggeman
  • Sr. Software Engineer at Keap (in Chandler)
  • Been a dev for 10 years
    • Frontend for about 8
    • Using flex/css grid for ~2.5

Who is this for?

  • Web developers
    • Beginners
    • Those wanting to learn new(ish) techniques

What should you know?

  • HTML/CSS Basics: elements, using html/css files
  • helpful: css display values: block, inline-block, inline
  • Syntax of a css rule set
.container {
   background: green;
   height: 20rem;
}

rule set

selector

property

value

Why?

  • Keeps HTML clean
  • Keeps CSS clean
    • separation of concerns
  • Looks great
    • easy centering!!

Flexbox

or "flex"

What is flexbox?

  • value for the `display` property
  • way of "flexibly" laying out HTML elements on a page

Can I use it?

  • Yes
  • (I hope so)

How to use

.flex-container {
  display: flex;
}
  • flex
    • ​flex-grow
    • flex-shrink
    • flex-basis
  • flex-direction
  • justify-content
  • align-items
  • order
  • flex-wrap
  • flex-flow
  • justify-items
  • align-content

The flex properties are:

Takeaways:

  • display: flex;
  • flex: 1;
  • align-items: center;
    • for vertical centering
  • justify-content: center;
    • for horizontal centering
  • flex-direction: row | column
  • @media screen and (max-width: 1024px)
    • media queries are the key to responsive layouts

CSS Grid

or "grid"

What is CSS Grid?

  • value for the `display` property
  • way of laying out HTML elements on a page
  • like flexbox, but:
    • more powerful
    • slightly more confusing
       
  • originated in IE 11 in 2011/2012, but with -ms- prefix
  • standardized in all modern browsers around 2017.

Can I use it?

  • Yes
  • (Probably)

How to use

.grid-container {
  display: grid;
}

Grid properties are:

  • grid-template-columns
  • grid-gap
  • justify-content
  • align-content
  • grid-area
  • grid-template-areas
  • grid-template-rows
  • grid-column-start
  • grid-column-end

Takeaways:

  • display: grid
  • grid-gap
    • for space between grid cells
  • grid-template-columns: 1fr 2fr;
    • for defining columns
  • justify-content: center;
    • for horizontal centering
  • align-content: center;
    • for vertical centering
  • grid-template-areas: 'myArea myArea'
  • grid-area: myArea

Questions?

Resources

Responsive layouts

By Laurel Bruggeman

Responsive layouts

Learn how to make web pages look great on any screen size with flexbox, css grid, and media queries.

  • 437