[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 12 CSS 그리드 레이아웃으로 배치하기

12-1 CSS 그리드 레이아웃 알아보기
12-2 그리드 라인과 템플릿 영역으로 배치하기

---

12-1 CSS 그리드 레이아웃 알아보기

css 그리드 레이아웃에서 사용하는 용어

• 그리드 항목을 배치할 때 가로와 세로 방향을 모두 사용
• 배치할 항목을 컨테이너로 묶어 주어야 함

그리드 컨테이너: 부모 요소

그리드 항목 또는 셀(cell): 자식 요소

css 그리드 레이아웃에서 항목을 배치하는 속성

그리드 컨테이 너를 지정하는 display 속성

• 그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소를 묶는 그리드 컨테이너로 만들어야 함
  

열과 행을 지정하는 grid-template-columns, grid-template-rows 속성

• grid-template-columns 속성은 그리드의 열 크기(너비)와 개수를 지정하는데 각 열의 너비를 순서대로 나열하면 됨
  grid-template-columns: 100px 200px 300px;
• grid-template-rows 속성은 그리드의 행 크기(높이)와 개수를 지정하는데 이때 지정한 순서대로 높이가 결정됨
  grid-template-rows: S0px 100px;
  

동적으로 만들어진 행의 높이를 지정하는 grid-auto-rows 속성

• 동적으로 추가된 행의 높이를 지정
  

상대적인 크기를 지정하는 fr 단위

• 그리드 레이아웃에서 상대적인 크기를 지정할 수 있도록 fr단위 사용
  grid-template-columns: 1fr 1fr 1fr;

값이 반복될 때 줄여서 표현할 수 있는 repeat( ) 함수

• 반복하지 않고 간단하게 표현할 수 있음
  grid-template-columns: 1fr 1fr 1fr;
  ↓
  grid-template-columns: repeat(3, 1fr);

최솟값과 최뱃값을 지정하는 minmax() 함수

• 행 높이를 고정하지 않고 최솟값과 최멋값을 사용해서 유연하게 지정
  
  

빈 공간을 자동으로 채우는 auto-fit 속성과 auto-fill 속성

• repeat 함수와 minmax 함수를 사용해 화면에 몇 개의 열을 표시할지 지 정
  grid-template-columns: repeat(5, minmax(100px, 1fr));

• 한 행에 열을 몇 개 배치할지 개수를 지정
• 반복횟수를 지정하는 대신 auto-fit이나 auto-fill을 사용할 수도 있음
  • auto-fit: 그리드 컨테이너 너비를 가득 채우도록 그리드 항목을 확장
  • auto-fill: 그리드 항목 너비를 지정한 크기인 100px만큼만 유지하고 남는 공간이 있을 경우 그대로 유지
    

그리드 항목의 간격을 조절하는 gap 속성

• 항목간에 간격이 펼요하다면 gap 속성을 사용해 지정
  

12-2 그리드 라인과 템플릿 영역으로 배치하기

그리드 라인을 사용해 배치하기

템플릿 영역을 사용해 배치하기

• 그리드 라인은 시작 번호와 꿀 변호를 일일이 지정해서 레이아웃을 만들어야하므로 불편 -> 템플릿 영역 만들어서 배치