Layout Tingkat Lanjut: Rasio Aspek & Kolom Koran
Flexbox dan Grid memang menguasai 90% tata letak struktur web modern. Tetapi, ada dua fitur CSS sangat kuat
berskala global yang sering dianaktirikan, padahal Tailwind sudah mempersiapkannya dengan istimewa.
Selamat berkenalan dengan Rasio Aspek (aspect-ratio)
untuk menjinakan iframe/gambar otomatis dan CSS Kolom (columns-*)
untuk teks bergaya majalah/koran.
📺 1. Mengendalikan Gambar & Video (aspect-*)
Sebelum adanya aspect-ratio di CSS, memaksakan Video YouTube / Foto Sampul (Thumbnail) tetap
memiliki proporsi *Widescreen* (16:9) atau *Bujur Sangkar* (1:1) di *smartphone* maupun tablet adalah mimpi
buruk (kita dulu harus mengakali persentase *padding-bottom* rahasia).
Kini, serahkan saja pada utilitas aspect-video atau
aspect-square!
class="w-full aspect-video object-cover"
class="w-1/2 aspect-square rounded-full"
Perlu rasio potret Bioskop (Poster Panjang)? Gunakan kelas sembarang yang dipelajari di bab sebelumnya:
aspect-[4/3]
atau aspect-[2/3].
📰 2. Tata Letak Mengalir (Mansonry & Koran)
Masih ingat halaman depan koran cetak di mana teks mengalir memanjang dari Kolom Kiri ke Kolom Kanan berurutan
secara dinamis tanpa jeda patah paragraf?
Di web, membuat hal itu menggunakan Grid amatlah sulit (Grid mengikat ke dalam Baris). Jawabannya adalah kelas
columns-*.
Tata letak inilah yang menggerakkan desain "Mansory Layout" super populer milik Pinterest!
Headline: Kebangkitan CSS
Dulu, desainer web hanya bisa bermimpi membuat tata letak dua atau tiga arah seperti majalah majalah cetak kelas atas. Membagi teks panjang menjadi dua kubu selalu melibatkan matematika manual atau framework Javascript yang berat dan mengorbankan pengalaman pengguna (*user experience*).
Tetapi, spesifikasi CSS Multi-column akhirnya disahkan dan disebarkan merata ke seluruh mesin peramban modern. Dengan satu utilitas di kontainer utama, konten ketikan akan secara mulus seperti aliran sungai berpindah ke kolom di sebelahnya begitu ia menyentuh paksaan garis bawah jendela browser.
— Frontend Engineer
Penambahan instruksi jarak seperti gap-8 akan otomatis
memberikan ruang lengang sebagai nafas (*white space*) pembatas yang cantik di antara bilik-bilik lorong
kalimat ini, mencegah mata pembaca lelah saat menyeberang antar tebing paragraf.
<div class="columns-1 md:columns-2 lg:columns-3 gap-8">
🎓 Kapan Memakai Fitur Lanjut Ini?
- Gunakan
aspect-videosecara agresif setiap kali membungkus tayangan<video>atau sematan<iframe>YouTube, agar ia tidak gepeng (*squashed*) saat ditonton melintang di layar sentuh ukuran apa pun! - Gunakan kombinasi
columns-1 sm:columns-2 md:columns-3saat kamu menerima tugas mendevelop platform baca blog atau galeri foto murni (tanpa peduli urutan dari kiri-kanan seperti Pinterest), karena gambar yang meninggi/memanjang ke bawah akan saling *pas* bak *puzzle Tetris*.