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