노마드코더 CSS Layout 마스터클래스 챌린지 - 3일차

 

1. flex grid

 

flex는 한 방향으로만 레이아웃을 표현한다면,

grid는 가로, 세로 2개의 방향의 레이아웃을 표현할 수 있다..

 

body {
  display: grid;
  grid-template-columns: 100px 200px 50px;
  grid-template-rows: 200px 100px 100px;
  row-gap: 10px;
  column-gap: 20px;
}

 

grid-template-columns : 열 배치

grid-template-rows : 행 배치

 

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr;
  row-gap: 10px;
  column-gap: 20px;
}

 

fr을 사용하면 비율대로 크기를 나누게 된다.