본문으로 건너뛰기
실습하기

실습 템플릿 Grid 레이아웃

실습 템플릿에 grid 레이아웃이 어떻게 사용되었을까요?


.grid​

.grid {
  display: grid;
  max-width: 1000px;
  margin: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(280px, auto);
  grid-gap: 14px;
}

  • display: grid;: 해당 요소를 grid 컨테이너로 만듭니다. grid 컨테이너 안의 자식 요소들은 grid 아이템이 됩니다.

  • grid-template-columns: repeat(2, 1fr);: 2개의 열(column, 세로축)을 동일한 크기(1fr는 사용 가능한 공간을 2로 나눈 값을 의미)로 생성합니다.

  • grid-auto-rows: minmax(280px, auto);: 행(row, 가로축)의 최소 높이를 280px로, 최대 높이는 자동으로 설정합니다.

  • grid-gap: 14px;: grid 아이템 간의 간격을 14px로 설정합니다.


.grid-image 와 .grid-video​

.grid-image {
  cursor: pointer;
}

.grid-video {
  object-fit: cover;
}

  • .grid-image: 이미지에 마우스를 올렸을 때 커서를 포인터를 변경하여 클릭 가능하다는 것을 나타냅니다.

  • .grid-video: 비디오의 사이즈를 조절하여 그리드 셀에 맞게 꽉 차게 표시합니다.

다음 내용이 궁금하다면?

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