이전 기사에서 CSS Grid의 기능을 살펴보았습니다. 자동 배치 기능을 사용하여 복잡한 레이아웃 생성. 나는 다른 기사에서 한 걸음 더 나아갔습니다. 그리드 레이아웃의 이미지에 확대/축소 호버 효과를 추가했습니다.. 이번에는 모양과 함께 작동하는 다른 유형의 그리드에 대해 자세히 알아보겠습니다.
예를 들어, 이미지가 완벽하게 정사각형이 아니라 육각형이나 마름모 모양이라면 어떨까요? 스포일러 경고: 우리는 할 수 있습니다. 사실, 우리는 우리가 살펴본 CSS 그리드 기술을 결합하고 일부 CSS를 드롭할 것입니다. clip-path 와 mask 상상할 수 있는 거의 모든 모양의 멋진 이미지 그리드를 만드는 마술!
마크업부터 시작하자
우리가 볼 레이아웃의 대부분은 언뜻 보기에는 쉽게 달성할 수 있지만 어려운 부분은 다음을 사용하여 달성하는 것입니다. 동일한 HTML 마크업. 우리는 많은 래퍼를 사용할 수 있습니다. divs 및 기타 등등이 있지만 이 게시물의 목표는 동일하고 가장 적은 양의 HTML 코드를 사용하면서 우리가 원하는 모든 다른 그리드를 얻는 것입니다. 결국 CSS는 스타일과 마크업을 분리하는 방법이 아닌 무엇입니까? 우리의 스타일은 마크업에 의존해서는 안 되며 그 반대도 마찬가지입니다.
이것은 다음과 같이 시작합니다.
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>여기서 필요한 것은 이미지가 있는 컨테이너뿐입니다. 더 이상 아무것도!
육각형의 CSS 그리드
이것은 때때로 "벌집" 그리드라고도 합니다.
이것을 만드는 방법을 보여주는 다른 블로그 게시물이 이미 많이 있습니다. 젠장, 나는 하나를 썼다. 여기 CSS-Tricks에서! 그 기사는 여전히 훌륭하고 반응형 레이아웃을 만드는 데 깊이 빠져 있습니다. 그러나 이 특정한 경우에는 훨씬 더 간단한 CSS 접근 방식에 의존할 것입니다.
먼저 사용해보자 clip-path 이미지에 육각형 모양을 만들고 겹치도록 동일한 격자 영역에 모두 배치합니다.
.gallery {
--s: 150px; /* controls the size */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)아직 멋진 것은 없습니다. 모든 이미지는 육각형이며 서로 위에 있습니다. 그래서 우리가 가진 모든 것이 하나의 육각형 모양의 이미지 요소인 것처럼 보이지만 실제로는 XNUMX개가 있습니다.
다음 단계는 이미지에 번역을 적용하여 그리드에 올바르게 배치하는 것입니다.
우리는 여전히 이미지 중 하나가 중앙에 남아 있기를 원합니다. 나머지는 CSS를 사용하여 주변에 배치됩니다. translate 그리고 좋은 구식 기하학. 다음은 그리드의 각 이미지에 대해 생각해낸 모의 공식입니다.
translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))몇 가지 계산과 최적화는 나중에(지루한 부분은 건너뛰도록 합시다, 맞죠?) 다음 CSS를 얻습니다.
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }아마도 우리가 얻을 때 더 쉬울 것입니다 CSS의 실제 삼각 함수!
각 이미지는 --_x 와 --_y 이러한 공식을 기반으로 하는 변수. 두 번째 이미지만(nth-child(2))는 중앙에 있기 때문에 모든 선택기에서 정의되지 않습니다. 다른 순서를 사용하기로 결정한 경우 모든 이미지가 될 수 있습니다. 내가 사용하는 순서는 다음과 같습니다.
몇 줄의 코드만으로 멋진 이미지 그리드를 얻을 수 있습니다. 여기에 이미지에 약간의 호버 효과를 추가하여 사물을 더 멋지게 만들었습니다.
뭔지 맞춰봐? 단순히 몇 가지 값을 업데이트하여 또 다른 육각형 그리드를 얻을 수 있습니다.
코드를 확인하고 이전 코드와 비교하면 내부의 값을 단순히 교환했음을 알 수 있습니다. clip-path 그리고 나는 사이를 전환했다 --x 와 --y. 그게 다야!
마름모꼴의 CSS 그리드
마름모는 45도 회전된 정사각형에 대한 멋진 단어입니다.
동일한 HTML, 기억하시나요? 먼저 CSS에서 2x2 이미지 그리드를 정의하는 것으로 시작합니다.
.gallery {
--s: 150px; /* controls the size */
display: grid;
gap: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: center;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}가장 먼저 눈에 들어오는 것은 grid 재산. 꽤 흔하게 사용되지는 않지만 하나의 선언으로 완전한 그리드를 정의할 수 있는 약칭이라는 점에서 매우 유용합니다. 가장 직관적인 속성은 말할 것도 없고 읽을 수 있는 속성도 아니지만, 배움 와 발견 새로운 것이므로 개별 그리드 속성을 모두 작성하는 대신 사용합시다.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);이것은 다음과 같은 두 개의 열을 정의합니다. --s 변수를 만들고 모든 행의 높이를 다음으로 설정합니다. --s 또한. 2개의 이미지가 있으므로 자동으로 2×XNUMX 격자를 얻습니다.
다음은 우리가 작성할 수 있는 또 다른 방법입니다.
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));...로 줄일 수 있습니다. grid 속기:
grid: repeat(2,var(--s)) / repeat(2,var(--s));그리드를 설정한 후 CSS를 사용하여 그리드와 이미지를 회전합니다. transforms 그리고 우리는 이것을 얻습니다:
두 가지를 모두 회전시키는 방법에 유의하십시오. 45deg, 그러나 반대 방향으로.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}이미지를 음의 방향으로 회전하면 이미지가 그리드와 함께 회전하는 것을 방지하여 직선을 유지합니다. 이제 우리는 적용 clip-path 마름모 모양을 잘라냅니다.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)거의 완료되었습니다! 이미지의 크기를 조정하여 서로 맞도록 해야 합니다. 그렇지 않으면 이미지 격자처럼 보이지 않을 정도로 멀리 떨어져 있습니다.
이미지는 이미지가 배치되는 격자 영역의 내접원인 녹색 원의 경계 내에 있습니다. 우리가 원하는 것은 그리드 영역의 외접원인 빨간색 원 안에 맞도록 이미지를 더 크게 만드는 것입니다.
더 이상 지루한 기하학을 소개하지 않겠습니다. 당신이 알아야 할 것은 각 원의 반지름 사이의 관계가 2의 제곱근(sqrt(2)). 이것은 영역을 채우기 위해 이미지 크기를 늘리는 데 필요한 값입니다. 우리는 사용할 것입니다 100%*sqrt(2) = 141% 그리고 완료!
.gallery {
--s: 150px; /* control the size */
display: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
gap: 10px;
place-items: center;
transform: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cover;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}육각형 격자처럼 멋진 확대/축소 호버 효과로 사물을 더 멋지게 만들 수 있습니다.
삼각형 모양의 CSS 그리드
지금쯤이면 큰 트릭이 clip-path 우리가 원하는 모양을 얻기 위해. 이 그리드의 경우 각 요소에는 고유한 clip-path 마지막 두 그리드는 일관된 모양으로 작동하는 반면 값. 그래서 이번에는 몇 가지 다른 삼각형 모양으로 작업하여 이미지의 직사각형 격자를 형성하는 것과 같습니다.
다음 CSS를 사용하여 3x2 그리드 안에 배치합니다.
.gallery {
display: grid;
gap: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: center;
}
.gallery > img {
width: 200px; /* controls the size */
aspect-ratio: 1;
object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }우리가 얻은 것은 다음과 같습니다.
마지막 터치는 가운데 열의 너비를 동일하게 만드는 것입니다. 0 이미지 사이의 공백을 제거합니다. 마름모 격자와 동일한 종류의 간격 문제가 있지만 사용 중인 모양에 대해 다른 접근 방식을 사용합니다.
grid-template-columns: auto 0 auto;나는 만지작거려야 했다 clip-path 값이 모두 퍼즐처럼 잘 맞는 것처럼 보이도록 합니다. 가운데 열의 너비가 XNUMX일 때 원본 이미지가 겹칩니다. 그러나 이미지를 슬라이싱한 후에는 환상이 완벽합니다.
CSS 피자 파이 그리드
뭔지 맞춰봐? 간단히 추가하여 또 다른 멋진 그리드를 얻을 수 있습니다. border-radius 와 overflow 우리의 격자 또는 삼각형 모양에. 🎉
퍼즐 조각의 CSS 그리드
이번에는 CSS를 가지고 놀 것입니다. mask 이미지를 퍼즐 조각처럼 보이게 하는 속성입니다.
사용하지 않은 경우 mask 과 CSS 그라디언트, 나는 적극 추천합니다 이 다른 기사 다음에 나올 내용에 도움이 될 것이므로 주제에 대해 썼습니다. 왜 그라디언트인가? 그것이 우리가 퍼즐 조각 모양의 둥근 노치를 얻기 위해 사용하는 것이기 때문입니다.
지금쯤이면 그리드 설정이 간단할 것이므로 대신 mask 부품.
위의 데모에서 볼 수 있듯이 최종 모양을 만들려면 두 개의 그라디언트가 필요합니다. 하나의 그라디언트는 원(녹색 부분)을 만들고 다른 하나는 상단 부분을 채우면서 오른쪽 곡선을 만듭니다.
--g: 6px; /* controls the gap */
--r: 42px; /* control the circular shapes */
background:
radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
top/100% calc(100% - var(--r)) no-repeat;두 개의 변수가 모양을 제어합니다. 그만큼 --g 변수는 그리드 간격에 불과합니다. 전체 퍼즐이 조립될 때 완벽하게 겹치도록 원을 올바르게 배치하려면 간격을 고려해야 합니다. 그만큼 --r 변수는 퍼즐 모양의 원형 부분의 크기를 제어합니다.
이제 동일한 CSS를 가져와서 몇 가지 값을 업데이트하여 세 가지 다른 모양을 만듭니다.
모양은 있지만 겹치는 가장자리가 없어 서로 맞도록 만들어야 합니다. 각 이미지는 해당 이미지가 있는 그리드 셀로 제한되므로 현재 모양이 뒤죽박죽인 이유가 이해가 됩니다.
이미지의 높이/너비를 늘려 오버플로를 만들어야 합니다. 위 그림에서 첫 번째와 네 번째 이미지의 높이를 늘리고 두 번째와 세 번째 이미지의 너비를 늘려야 합니다. 아마도 이미 --r 변하기 쉬운.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
height: 100%;
width: calc(100% + var(--r));
}우리는 점점 가까워지고 있습니다!
겹침을 만들었지만 기본적으로 이미지는 오른쪽(너비를 늘리면)이나 아래쪽(높이를 늘리면)에서 겹칩니다. 그러나 그것은 우리가 두 번째와 네 번째 이미지에 대해 원하는 것이 아닙니다. 수정은 사용하는 것입니다 place-self: end 이 두 이미지에서 전체 코드는 다음과 같습니다.
다음은 방사형 그라디언트 대신 원뿔형 그라디언트를 사용하는 또 다른 예입니다. 이것은 동일한 기본 HTML 및 CSS를 유지하면서 삼각형 퍼즐 조각을 제공합니다.
마지막! 이번에 제가 사용하고 있는 clip-path 애니메이션을 적용할 수 있는 속성이므로 모양을 제어하는 사용자 지정 속성을 업데이트하기만 하면 멋진 호버를 얻을 수 있습니다.
최대 포장
이것이 첫 번째 부분의 전부입니다! CSS Grid에 대해 이미 배운 것을 몇 가지 추가된 내용과 결합하여 clip-path 와 mask 마술 덕분에 다양한 모양의 그리드 레이아웃을 만들 수 있었습니다. 그리고 매번 같은 HTML 마크업을 사용했습니다! 그리고 마크업 자체는 소수의 이미지 요소가 있는 컨테이너에 불과합니다!
두 번째 부분에서는 더 멋진 모양과 호버 효과를 사용하여 더 복잡해 보이는 격자를 탐색할 것입니다.
함께 만든 이미지 패널을 확장하는 데모를 볼 계획입니다. 이 다른 기사:
... 그리고 지그재그 이미지 패널로 변환하십시오! 그리고 이것은 우리가 다음 기사에서 발견하게 될 많은 것 중 하나의 예일 뿐입니다.
