MEPX
Chapter 4 of 10All chapters
  1. 1How a page arrives
  2. 2HTML
  3. 3CSS
  4. 4Layout
  5. 5JavaScript in the browser
  6. 6Accessibility
  7. 7Performance
  8. 8State and storage
  9. 9Tools and frameworks
  10. 10Deploying

Chapter 4 of 10

Layout

Flexbox, grid and responsive design.

Two systems

Flexbox arranges items in one direction and is right for rows of controls. Grid arranges in two directions and is right for page layout. Most designs use both.

  • gap spaces children without margins on each one.
  • minmax and auto-fill make a grid respond without any media queries.

Responsive

Design for the small screen first and add layout as space allows. Relative units and max-width on images prevent the horizontal scrollbar that ruins phones.