Dalam artikel sebelumnya, saya melihat kemampuan CSS Grid untuk buat tata letak yang kompleks menggunakan kekuatan penempatan otomatisnya. Saya mengambil satu langkah lebih jauh di artikel lain yang menambahkan efek hover zoom ke gambar dalam tata letak kotak. Kali ini, saya ingin menyelami jenis grid lain, yang bekerja dengan bentuk.
Seperti, bagaimana jika gambar tidak persegi sempurna tetapi berbentuk seperti segi enam atau belah ketupat? Peringatan spoiler: kita bisa melakukannya. Sebenarnya, kita akan menggabungkan teknik Grid CSS yang telah kita lihat dan masukkan beberapa CSS clip-path dan mask sihir untuk membuat kisi-kisi gambar yang mewah untuk hampir semua bentuk yang dapat Anda bayangkan!
Mari kita mulai dengan beberapa markup
Sebagian besar tata letak yang akan kita lihat mungkin terlihat mudah untuk dicapai pada pandangan pertama, tetapi bagian yang menantang adalah untuk mencapainya dengan markup HTML yang sama. Kita bisa menggunakan banyak pembungkus, divs, dan yang lainnya, tetapi tujuan dari posting ini adalah untuk menggunakan jumlah kode HTML yang sama dan terkecil dan tetap mendapatkan semua grid berbeda yang kita inginkan. Lagi pula, apa itu CSS selain cara memisahkan gaya dan markup? Gaya kita seharusnya tidak bergantung pada markup, dan sebaliknya.
Ini mengatakan, mari kita mulai dengan ini:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Wadah dengan gambar adalah semua yang kita butuhkan di sini. Tidak ada lagi!
Grid CSS dari Segi Enam
Ini juga kadang-kadang disebut sebagai kisi "sarang lebah".
Sudah ada banyak posting blog lain di luar sana yang menunjukkan cara membuat ini. Astaga, aku menulis satu di sini di CSS-Trik! Artikel itu masih bagus dan sangat membantu dalam membuat tata letak yang responsif. Tetapi untuk kasus khusus ini, kita akan mengandalkan pendekatan CSS yang lebih sederhana.
Pertama, mari kita gunakan clip-path pada gambar untuk membuat bentuk segi enam dan kami menempatkan semuanya di area kotak yang sama sehingga tumpang tindih.
.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%)Belum ada yang mewah. Semua gambar adalah segi enam dan di atas satu sama lain. Jadi sepertinya yang kita miliki hanyalah satu elemen gambar berbentuk segi enam, tetapi sebenarnya ada tujuh.
Langkah selanjutnya adalah menerapkan terjemahan ke gambar untuk menempatkannya dengan benar di kisi.
Perhatikan bahwa kita masih ingin salah satu gambar tetap berada di tengah. Sisanya ditempatkan di sekitarnya menggunakan CSS translate dan geometri kuno yang bagus. Berikut adalah formula tiruan yang saya buat untuk setiap gambar di grid:
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))Beberapa perhitungan dan optimasi nanti (mari kita lewati bagian yang membosankan itu, kan?) kita mendapatkan CSS berikut:
.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)); }Mungkin itu akan lebih mudah ketika kita mendapatkan fungsi trigonometri nyata dalam CSS!
Setiap gambar diterjemahkan oleh --_x dan --_y variabel yang didasarkan pada rumus tersebut. Hanya gambar kedua (nth-child(2)) tidak ditentukan di pemilih mana pun karena itu yang ada di tengah. Ini bisa berupa gambar apa saja jika Anda memutuskan untuk menggunakan urutan yang berbeda. Berikut urutan yang saya gunakan:
Dengan hanya beberapa baris kode, kita mendapatkan kisi-kisi gambar yang keren. Untuk ini, saya menambahkan sedikit efek hover ke gambar untuk membuat segalanya lebih menarik.
Tebak apa? Kita bisa mendapatkan kisi segi enam lain hanya dengan memperbarui beberapa nilai.
Jika Anda memeriksa kode dan membandingkannya dengan yang sebelumnya, Anda akan melihat bahwa saya hanya menukar nilai di dalamnya clip-path dan saya beralih di antara --x dan --y. Itu saja!
Grid CSS dari Belah Ketupat
Belah ketupat adalah kata yang bagus untuk persegi yang diputar 45 derajat.
HTML yang sama, ingat? Pertama-tama kita mulai dengan mendefinisikan kotak gambar 2x2 di CSS:
.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;
}Hal pertama yang mungkin menarik perhatian Anda adalah grid Properti. Ini sangat jarang digunakan tetapi sangat membantu karena ini adalah singkatan yang memungkinkan Anda menentukan kisi lengkap dalam satu deklarasi. Ini bukan properti yang paling intuitif — dan belum lagi dapat dibaca —, tetapi kami di sini untuk belajar dan menemukan hal-hal baru, jadi mari kita gunakan daripada menulis semua properti grid individu.
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);Ini mendefinisikan dua kolom sama dengan --s variabel dan mengatur tinggi semua baris ke --s demikian juga. Karena kami memiliki empat gambar, kami akan secara otomatis mendapatkan kotak 2x2.
Inilah cara lain kita bisa menulisnya:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…yang dapat dikurangi dengan grid steno:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Setelah mengatur grid, kami memutarnya dan gambar dengan CSS transforms dan kami mendapatkan ini:
Perhatikan bagaimana saya memutar keduanya dengan 45deg, tetapi dalam arah yang berlawanan.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Memutar gambar ke arah negatif mencegahnya diputar dengan kisi sehingga tetap lurus. Sekarang, kami menerapkan clip-path untuk memotong bentuk belah ketupat dari mereka.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Kami hampir selesai! Kita perlu memperbaiki ukuran gambar agar pas bersama. Jika tidak, mereka ditempatkan berjauhan hingga tidak terlihat seperti kisi-kisi gambar.
Gambar berada di dalam batas lingkaran hijau, yang merupakan lingkaran bertulisan dari area grid tempat gambar ditempatkan. Yang kita inginkan adalah membuat gambar lebih besar agar pas di dalam lingkaran merah, yang merupakan lingkaran terbatas dari area grid.
Jangan khawatir, saya tidak akan memperkenalkan geometri yang membosankan lagi. Yang perlu Anda ketahui adalah bahwa hubungan antara jari-jari setiap lingkaran adalah akar kuadrat dari 2 (sqrt(2)). Ini adalah nilai yang kita butuhkan untuk memperbesar ukuran gambar kita untuk mengisi area. Kami akan menggunakan 100%*sqrt(2) = 141% dan selesai!
.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%);
}Seperti kisi segi enam, kita dapat membuat segalanya lebih menarik dengan efek melayang-layang zoom yang bagus:
Grid CSS dari Bentuk Segitiga
Anda mungkin sudah tahu sekarang bahwa trik besarnya adalah mencari tahu clip-path untuk mendapatkan bentuk yang kita inginkan. Untuk kisi ini, setiap elemen memilikinya sendiri clip-path nilai sedangkan dua grid terakhir bekerja dengan bentuk yang konsisten. Jadi, kali ini, sepertinya kita bekerja dengan beberapa bentuk segitiga berbeda yang disatukan untuk membentuk kotak gambar persegi panjang.
Kami menempatkannya di dalam kotak 3 × 2 dengan CSS berikut:
.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%); } }Inilah yang kami dapatkan:
Sentuhan terakhir adalah membuat lebar kolom tengah sama 0 untuk menghilangkan spasi di antara gambar. Jenis masalah jarak yang sama yang kami miliki dengan kisi belah ketupat, tetapi dengan pendekatan berbeda untuk bentuk yang kami gunakan:
grid-template-columns: auto 0 auto;Saya harus bermain-main dengan clip-path nilai untuk memastikan mereka semua tampak cocok bersama seperti teka-teki. Gambar asli tumpang tindih ketika kolom tengah memiliki lebar nol, tetapi setelah mengiris gambar, ilusi menjadi sempurna:
Kotak Pizza Pie CSS
Tebak apa? Kita bisa mendapatkan grid keren lainnya hanya dengan menambahkan border-radius dan overflow ke grid atau bentuk segitiga kami.
Grid CSS dari Potongan Puzzle
Kali ini kita akan bermain dengan CSS mask properti untuk membuat gambar terlihat seperti potongan puzzle.
Jika Anda belum pernah menggunakannya mask dengan Gradien CSS, Saya sangat merekomendasikan artikel lainnya ini Saya menulis tentang topik ini karena itu akan membantu apa yang akan terjadi selanjutnya. Mengapa gradien? Karena itulah yang kami gunakan untuk mendapatkan takik bulat dalam bentuk potongan puzzle.
Menyiapkan kisi-kisi seharusnya sudah mudah sekarang, jadi mari kita fokus pada mask bagian.
Seperti yang diilustrasikan dalam demo di atas, kita membutuhkan dua gradien untuk membuat bentuk akhir. Satu gradien membuat lingkaran (bagian hijau) dan yang lainnya membuat kurva kanan saat mengisi bagian atas.
--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;Dua variabel mengontrol bentuk. Itu --g variabel tidak lain adalah kesenjangan grid. Kita perlu memperhitungkan celah untuk menempatkan lingkaran kita dengan benar sehingga mereka tumpang tindih dengan sempurna ketika seluruh teka-teki dirakit. Itu --r variabel mengontrol ukuran bagian melingkar dari bentuk puzzle.
Sekarang kita mengambil CSS yang sama dan memperbarui beberapa nilai di dalamnya untuk membuat tiga bentuk lainnya:
Kami memiliki bentuk, tetapi bukan tepi yang tumpang tindih yang kami butuhkan untuk membuatnya cocok bersama. Setiap gambar dibatasi pada sel kisinya, jadi masuk akal mengapa bentuknya agak campur aduk saat ini:
Kita perlu membuat overflow dengan meningkatkan tinggi/lebar gambar. Dari gambar di atas, kita harus menambah tinggi gambar pertama dan keempat sementara kita menambah lebar gambar kedua dan ketiga. Anda mungkin sudah menebak bahwa kami perlu meningkatkannya menggunakan --r variabel.
.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));
}Kami semakin dekat!
Kami membuat tumpang tindih tetapi, secara default, gambar kami tumpang tindih di sebelah kanan (jika kami menambah lebar) atau di bawah (jika kami menambah tinggi). Tapi bukan itu yang kami inginkan untuk gambar kedua dan keempat. Cara mengatasinya adalah dengan menggunakan place-self: end pada dua gambar itu dan kode lengkap kami menjadi ini:
Berikut adalah contoh lain di mana saya menggunakan gradien kerucut alih-alih gradien radial. Ini memberi kita potongan puzzle segitiga sambil menjaga HTML dan CSS dasar yang sama.
Yang terakhir! Kali ini saya menggunakan clip-path dan karena ini adalah properti yang dapat kita animasikan, kita mendapatkan hover keren hanya dengan memperbarui properti kustom yang mengontrol bentuk.
Membungkus
Itu saja untuk bagian pertama ini! Dengan menggabungkan hal-hal yang telah kita pelajari tentang CSS Grid dengan beberapa tambahan clip-path dan mask ajaib, kami dapat membuat tata letak kotak yang menampilkan berbagai jenis bentuk. Dan kami menggunakan markup HTML yang sama setiap kali! Dan markup itu sendiri tidak lebih dari sebuah wadah dengan beberapa elemen gambar!
Di bagian kedua, kita akan menjelajahi kisi-kisi yang tampak lebih kompleks dengan bentuk yang lebih mewah dan efek melayang.
Saya berencana untuk mengambil demo perluasan panel gambar yang kami buat bersama artikel lainnya ini:
…dan mengubahnya menjadi panel gambar zig-zag! Dan ini hanya satu contoh di antara banyak yang akan kita temukan di artikel berikutnya.
