CSS Grid를 사용하여 요소를 서로 위에 배치

이것은 내가 최근에 배운 아주 멋진 트릭입니다.

문제

이미지와 일부 텍스트가 포함된 카드가 있습니다. 이미지의 크기는 카드의 너비에 따라 다릅니다. 텍스트의 길이는 얼마든지 가능합니다.

카드 위로 마우스를 가져가면 전체 카드가 배경색으로 채워지고 다른 텍스트가 표시됩니다.

비 그리드 솔루션

확실한 해결책은 카드에 대한 div와 호버에 대한 div를 갖고 위치 절대값을 사용하여 서로 위에 놓는 것입니다. 그러나 카드의 이미지와 텍스트보다 더 많은 공간을 차지하더라도 카드는 마우스 오버 텍스트가 모두 들어갈 수 있을 만큼 충분히 길어야 합니다. 절대적으로 배치된 요소는 공간을 차지하지 않기 때문에 문제가 됩니다.

해결책은 JavaScript로 이동하여 두 div의 높이를 계산하고 카드 높이를 더 큰 높이로 설정하는 것입니다. 매우 간단한 스크립트이며 많은 작업이 필요하지 않습니다.

카드 이미지가 느리게 로드되고 화면 상단에 표시되지 않는다는 점만 제외하면 됩니다. 그리고 나는 여러 장의 카드를 가지고 있었다. 이 시점에서 JavaScript는 더 복잡해 보였고 두 개의 div를 서로 위에 배치하는 다른 방법이 있는지 알아보기 위해 드로잉 보드(예: Google)로 돌아갔습니다. 그리고 있습니다!

그리드 솔루션

우리는 절대적으로 사용할 수 있습니다.

이 솔루션에는 카드 콘텐츠와 hover div가 모두 포함된 컨테이너가 필요합니다.

<div class="card">
  <div class="card-contents">
  <div class="card-hover">
  </div>
</div>

그런 다음 .card를 그리드로 만들 수 있습니다.

.card {
  display: grid;
}

그리드에서 원하는 행이나 열의 수를 알려주지 않았기 때문에 자체적으로 해결합니다. 내부에 두 개의 요소가 있으므로 암묵적으로 두 개의 행을 생성합니다. 하나는 콘텐츠용이고 다른 하나는 호버용입니다.

우리가 해야 할 일은 첫 번째 행에 둘 다 필요하다고 말하는 것입니다.

.card-contents,
.card-hover {
  grid-row: 1;
}

지금은 암묵적으로 대신 두 개의 열을 생성하는 것을 제외하고... 하지만 첫 번째 열에 두 열을 모두 원한다고 말함으로써 쉽게 해결할 수 있습니다.

.card-contents,
.card-hover {
  grid-row: 1;
  grid-column: 1;
}

그리고 그게 다야! CSS 그리드의 마법에 의해 두 div가 서로 위에 있습니다. 이 CodePen에서 호버 효과를 위한 추가 CSS를 추가하고 너무 끔찍하지 않게 보이도록 만들었습니다. 그리고 실제로 호버링할 필요 없이 카드 뒤에 있는 호버링을 볼 수 있도록 카드를 약간 투명하게 만들었습니다.