confidential-nt/canal

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:

• https://besthorrorscenes.com/
• https://paint-box.com/
• http://10x19.co/
• http://www.z-o-o.fr/
• https://schwartzmedia.com.au/
• https://tolv.dk/
• https://rodicdavidson.co.uk/
• https://beige.de/
• http://donicaida.com/
• https://canalstreet.market/
• https://wonhundred.com/