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:

-[] -[] -[] -[] -[] -[] -[] -[] -[] -[] -[]