CSS grid

📌 grid

✏️ Flex와 Grid의 차이

• Flex는 한 방향 레이아웃 시스템이고 (1차원)
• Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

사용법

flex 처럼 display : grid로 시작

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>

.container {
  display: grid;
  //이것만으로는 flex와 다르게 아무변화가 없음, 속성을 추가해주어야 한다.
}

용어

• 그리드 컨테이너 (Grid Container) display: grid를 적용하는 Grid의 전체 영역, Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 된다. 위 코드 <div class=”container”></div>가 Grid 컨테이너임
• 그리드 아이템 (Grid Item) Grid 컨테이너의 자식 요소, 바로 이 아이템들이 Grid 규칙에 의해 배치됨. 위 코드에서 <div class=”item”></div>들이 Grid 아이템이다.
• 그리드 트랙 (Grid Track) Grid의 행(Row) 또는 열(Column)
• 그리드 셀 (Grid Cell) Grid의 한 칸, <div>같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 된다.
• 그리드 라인(Grid Line) Grid 셀을 구분하는 선
• 그리드 번호(Grid Number) Grid 라인의 각 번호
• 그리드 갭(Grid Gap) Grid 셀 사이의 간격

• 그리드 영역(Grid Area) Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합

  그리드 형태 정의

• grid-template-columns
• grid-template-rows

.container {
  grid-template-columns: 200px 200px 500px;
  /* grid-template-columns: 1fr 1fr 1fr */
  /* grid-template-columns: repeat(3, 1fr) */
  /* grid-template-columns: 200px 1fr */
  /* grid-template-columns: 100px 200px auto */

  grid-template-rows: 200px 200px 500px;
  /* grid-template-rows: 1fr 1fr 1fr */
  /* grid-template-rows: repeat(3, 1fr) */
  /* grid-template-rows: 200px 1fr */
  /* grid-template-rows: 100px 200px auto */
}

fr : 비율,

ex) 1fr 1fr 1fr : 1:1:1 비율로 나눈다

repeat(3,1fr) = 1fr 1fr 1fr