Grid에 대해 자세히 알아보기

아직 그리드가 어떻게 사용되는지 와닿지 않죠? 본격적으로 시작하기 전에, Grid 레이아웃의 핵심 개념을 조금 더 자세히 소개하겠습니다.

grid-template-columns

CSS Grid 레이아웃에서 그리드 컨테이너의 열(column, 세로줄)의 갯수와 너비를 지정하는 속성입니다.

예를 들어

.container {
  display: grid;
  grid-template-columns: 100px 200px;
}

위와 같은 클래스는 .container 클래스를 가진 요소를 그리드 컨테이너로 설정하고, grid-template-columns 속성을 사용해 열(세로줄)의 갯수와 크기를 지정합니다.

grid-template-columns: 100px 200px;는 그리드 열을 2개 만들고, 첫 번째 열의 너비를 100px 두 번째 열의 너비를 200px로 정합니다.

만약 그리드 컨테이너의 열을 동일하게 3번 반복하여 생성하고 각 열의 너비를 동일하게 설정하려면, grid-template-columns: repeat(3, 1fr);를 사용할 수 있습니다.

영어 단어 repeat은 "반복하다"라는 의미이고, 3은 동일한 너비의 열을 "3번 반복해서" 만든다는 의미입니다.

1fr은 가용 공간을 동일한 비율로 분할한다는 뜻이며, 열의 너비를 균등하게 설정합니다.

여기서 fr은 그리드 컨테이너 내에서 사용 가능한 공간의 비율을 의미합니다.

방금 소개한 grid-template-columns에서 "template" 대신 "auto"가 들어가 있습니다.

grid-auto-columns는 그리드 컨테이너 내에서 그리드 아이템이 생성될 때 추가 열(세로줄)의 너비를 지정할 수 있습니다.

예를 들어, 다음과 같은 CSS 코드를 사용하면 그리드 컨테이너 내의 추가적인 열의 너비를 설정할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-columns: 150px;
}

위의 코드는 "grid-template-columns" 속성을 사용해 첫 번째 열의 너비를 100px, 두 번째 열의 너비를 200px로 설정합니다.

그리고 "grid-auto-columns" 속성을 사용해 추가적으로 생성되는 그리드 아이템 열의 너비를 150px로 설정합니다.

CSS Grid 레이아웃에서 그리드 컨테이너의 행(row, 가로줄)의 크기와 높이를 지정하는 속성입니다.

방금 배운 grid-template-columns의 모든 특성이, 세로줄이 아닌 "가로줄"로 적용된다고 생각할 수 있습니다.

예를 들어,

.container {
  display: grid;
  grid-template-rows: 100px 200px 150px;
}

위의 코드는 grid-template-rows: 100px 200px 150px; 속성을 사용해 그리드 행을 3개 만들고, 첫 번째 행의 높이를 100px, 두 번째 행의 높이를 200px, 세번째 행의 높의를 150px로 정합니다.

grid-template-columns와 마찬가지로 grid-template-rows: repeat(3, 1fr);를 사용하면 동일한 높이의 행을 "3번 반복해서" 만든다는 의미입니다.

3. grid-auto-rows: 앞서 설명한 "grid-auto-columns"처럼, "grid-auto-rows"는 그리드 컨테이너 내에서 그리드 아이템이 생성될 때 추가 행의 높이를 지정합니다.

예를 들어,

.container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-auto-rows: 150px;
}

위의 코드는 "grid-template-rows" 속성을 사용하여 첫 번째 행의 높이를 100px, 두 번째 행의 높이를 200픽셀로 설정합니다.

그리고 "grid-auto-rows" 속성을 사용하여 추가적으로 생성되는 그리드 아이템의 행 높이를 150px로 설정합니다.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!