/css-layout-master

CSS Layout Master 2021 (feat. Scss)

Primary LanguageHTML

SCSS Masterclass

(S)CSS Layout Masterclass: Flexbox & Grid

Flexbox:

  • flex-direction
  • order
  • justify-content
  • align-items
  • align-self
  • flex-wrap
  • align-content
  • flex-grow
  • flex-shrink
  • flex-basis

Grid:

  • grid-template-columns
  • grid-template-rows
  • column-gap
  • row-gap
  • gap
  • grid-template-areas
  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-template
  • justify-items
  • align-items
  • place-items
  • justify-content
  • align-content
  • place-content
  • justify-self
  • align-self
  • place-self
  • grid-auto-rows
  • grid-auto-flow
  • grid-auto-columns

Keywords & Functions:

  • repeat
  • fr
  • minmax
  • auto-fit
  • auto-fill
  • min-content
  • max-content

SCSS:

  • Variables
  • Nesting
  • Mixins
  • Extend
  • Responsive Mixins

To Clone: