/css-master

Study css & scss

Primary LanguageSCSS

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: