본문으로 건너뛰기

실습 템플릿 Grid 레이아웃

실습 템플릿 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: 비디오의 사이즈를 조절하여 그리드 셀에 맞게 꽉 차게 표시합니다.