[CSS] grid 그리드 사용법

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

설명

• repeat(3, 1fr):
  • repeat 함수는 반복적인 그리드 트랙을 정의합니다.
  • 첫 번째 인수인 3은 반복 횟수를 의미합니다. 여기서는 3번 반복됩니다.
  • 두 번째 인수인 1fr은 각 트랙의 크기를 정의합니다. 여기서 1fr은 그리드 컨테이너 내의 사용 가능한 공간의 비율을 의미합니다.

fr 단위

• fr(Fraction Unit):
  • fr 단위는 CSS Grid에서 사용 가능한 공간을 분할하는 데 사용됩니다.
  • 예를 들어, 1fr은 가용 공간의 1부분을 의미합니다. 여러 fr 값이 있을 때, 각각의 값은 전체 가용 공간의 비율을 정의합니다.