[CSS] Grid Layout

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