[CSS] Grid Layout

박종범·2021년 9월 6일
0

Grid Container 속성

display: grid;

grid-template

  • grid-template-columns: size size size ...
  • grid-template-rows: size size size ...

grid-auto-template

grid-template의 속성에 영향을 받지 않는 item들에 대한 template

  • grid-auto-columns: size size size ...
  • grid-auto-rows: size size size ...

grid template areas

  • grid-template-areas:
    "header header header"
    "leftbar main rightbar"
    ". . ."
    "footer footer footer"

Grid Item에 grid-area 속성으로 이름 지정해주기

간격

  • row-gap: size
  • column-gap: size
  • gap: row-gap column-gap

정렬

Grid Item 각각의 위치 설정

  • align-items: [stretch | start | center | end]
  • justify-items: [stretch | start | center | end]
  • place-items: align-items justify-items

Grid Item들 전체 위치 설정

  • align-content: [stretch | start | center | end | space-between | space-around | space-evenly]
  • justify-content: [stretch | start | center | end | space-between | space-around | space-evenly]
  • place-content: align-content justify-content

Grid Item 속성

grid-area

  • grid-area: 이름

그리드의 이름 지정

Grid Item의 영역지정

  • grid-column: grid-column-start / grid-column-end
  • grid-row: grid-row-start / grid-row-end

1 / span 2 하면 1부터 2칸까지!

정렬

  • align-self: [stretch | start | center | end]
  • justify-self: [stretch | start | center | end]
  • place-self: align-self justify-self

참고링크

1분코딩
MDN

0개의 댓글