Skip to content

Latest commit

 

History

History
54 lines (45 loc) · 1.55 KB

README.md

File metadata and controls

54 lines (45 loc) · 1.55 KB
Raw

Module 5 - Sizing and Position

Media Queries

  • How to create a media query
  • How to modify the layout according to media properties
  • Restricting to screen media
  • Restricting to size and creating various breakpoints
  • Why not to use media queries and what better alternatives exist

Sizing functions

  • The max function
  • The min function
  • The clamp function
  • Using math inside min, max and clamp
  • Responsive font sizes: Adjusting font sizes using functions
  • The minmax function
  • The limitations of min, max and clamp that minmax does not have
  • Responsive grids using functions

Sizing Constants

  • max-content value
  • min-content value
  • Using sizing constants in grid templates

Automatic row creation

  • Review of the grid-auto-rows and grid-auto-columns container property
  • repeat with auto-fill
  • repeat with auto-fit
  • The difference between auto-fit and auto-fill

Introcution to Positions

  • Static
  • Relative
  • Absolute
    • What is the anchor point?
    • 'top: auto' what does it mean?
    • top, bottom, left, and right?
  • Fixed

Sticky Position

  • Using sticky position
    • Sticky relative to parent
    • What happens when the parent scrolls out of view
    • Sticky to top or bottom
  • Sticky position in tables

Combining Position with Flex and Grid

  • Position inside grid relative to "expected" position

Extra links