Skip to content
This repository was archived by the owner on Aug 5, 2022. It is now read-only.

unchaptered/21-07-clone-CSSLayout

Repository files navigation

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 :::::: :root
  • Nesting ::::: structure
  • Mixins :::::: @mixin content 로 상속가능
  • Extend :::::: %name
  • Responsive Mixins :::::: @mixin content 로 상속가능

To Clone:

About

클론코딩 : CSS 레이아웃 연습

Topics

Resources

Stars

Watchers

Forks