CSS Grid

grid

  • flexbox로는 grid를 구현하기 힘들어서 나오게 됨

  • grid-template-columns : 만들고 싶은 column의 수 만큼 크기를 작성

  • grid-template-rows : 원하는 row의 크기를 작성

  • grid-template-areas : grid-area와 함께 사용, layout을 string으로 작성

  • grid-template : (shortcuts)

    grid-template :
  "header header header header" 1fr
  "content content content nav" 2fr
  "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr
  // repeat dosen't work

  • repeat(반복횟수, 크기);

    • auto-fit : 정해진 사이즈 안에서 현재 element를 딱 맞게 채움

    • auto-fill : 정해진 사이즈 안에서 가능한 많은 element를 생성(비어있더라도)

  • fr(fraction) : 사용가능한 공간(grid내에서)

  • minmax(100px, 1fr) : 최소 크기와 최대 크기를 지정

  • min-content : content가 작아질 수 있는 만큼 작아짐

  • max-content : content가 필요한 크기만큼 가짐

repeat(auto-fit, minmax(20px, max-content))

  • column-gap : column사이의 공간

  • row-gap : row사이의 공간

  • gap : column과 row사이의 공간

  • 높이와 넓이가 있어야 적용됨

  • items는 각 셀에 대한 속성

  • justify-items : stretch(default) (수평, 가로)

  • align-items : stretch(default) (수직, 세로)

    • place-items : 수직 수평

  • content는 grid 자체를 움직이는 속성

  • justify-content : start(default) 수평

  • align-content : start(default) 수직

    • place-content : 수직 수평

  • 설정된 것 이상으로 셀이 늘어나면 적용되는 속성

  • grid-auto-rows

  • grid-auto-flow : row or column(늘어날 방향을 적용)

  • grid-auto-columns

자식속성

  • grid-area : grid-template-areas에서 사용할 이름을 지정해줌

  • grid-column-start(end) : 어디서 시작하고 어디서 끝날지 숫자 (column line) 로 지정

  • grid-row-start(end) : 어디서 시작하고 어디서 끝날지 숫자 (row line) 로 지정

    • grid-column : start / end

    • grid-row : start / end

      • (-1) = 가장 끝 라인을 의미

      • span 2 = 공간 2개를 의미

  • justify-self

  • align-self

    • place-self : 수직 수평

PreviousCSS FlexboxNextSCSS

Last updated