📌 전체 게시글 목록

.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 값이 있을 때, 각각의 값은 전체 가용 공간의 비율을 정의합니다.