Ketika memikirkan tata letak, kita sering memikirkan desain tingkat halaman. Namun, komponen yang lebih kecil di dalam halaman dapat memiliki tata letak mandiri.
Idealnya, tata letak tingkat komponen ini akan menyesuaikan sendiri secara otomatis, apa pun posisinya di halaman. Mungkin ada situasi saat Anda tidak mengetahui apakah suatu komponen akan ditempatkan di dalam kolom konten utama atau di sidebar, atau keduanya. Tanpa mengetahui pasti di mana komponen akan muncul, Anda perlu memastikan komponen dapat menyesuaikan dirinya sendiri dengan container-nya.
Grid
Petak CSS tidak hanya untuk tata letak tingkat halaman. Ia juga bekerja dengan baik untuk komponen-komponen yang ada di dalamnya.
Dalam contoh ini, elemen semu ::before
dan ::after
membuat garis dekoratif di kedua sisi judul.
Judulnya sendiri adalah penampung petak.
Elemen individu ditata sehingga garis selalu mengisi ruang yang tersedia.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Pelajari cara memeriksa tata letak petak di Chrome DevTools.
Kotak Flex
Seperti namanya, flexbox memungkinkan Anda membuat komponen yang fleksibel. Anda dapat mendeklarasikan elemen mana dalam komponen yang harus memiliki ukuran minimum atau maksimum dan membiarkan elemen lainnya ditekuk agar sesuai.
Dalam contoh ini, gambar menempati seperempat dari ruang yang tersedia dan teks menempati tiga perempat lainnya. Namun, ukuran gambar tidak pernah lebih besar dari 200 piksel.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Pelajari cara memeriksa tata letak flexbox di Chrome DevTools.
Kueri penampung
Flexbox memungkinkan Anda mendesain dari konten. Anda dapat menentukan parameter elemen (seberapa sempit elemen tersebut, lebarnya seharusnya), dan membiarkan browser mengetahui implementasi akhir.
Namun, komponen itu sendiri tidak memahami konteksnya. ID tersebut tidak tahu apakah file tersebut digunakan di konten utama atau di sidebar. Hal ini dapat membuat tata letak komponen lebih rumit daripada tata letak halaman. Agar dapat menerapkan gaya yang relevan secara kontekstual, komponen Anda perlu mengetahui lebih dari ukuran area pandang yang ada di dalamnya.
Dengan tata letak halaman, Anda benar-benar mengetahui lebar penampung karena penampungnya adalah area pandang browser; kueri media melaporkan dimensi penampung tingkat halaman.
Untuk melaporkan dimensi penampung, gunakan kueri penampung.
Untuk memulai, tentukan elemen mana yang akan berfungsi sebagai container.
main,
aside {
container-type: inline-size;
}
Ini berarti Anda dapat mengkueri dimensi inline. Untuk dokumen berbahasa Inggris, posisi tersebut adalah sumbu horizontal. Anda akan mengubah gaya berdasarkan lebar penampung.
Jika komponen ada di dalam salah satu penampung tersebut, Anda dapat menerapkan gaya dengan cara yang sangat mirip dengan kueri media.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Jika objek media berada di dalam penampung yang lebih sempit dari 25em
,
gaya flexbox tidak akan diterapkan. Gambar dan teks yang muncul disusun secara vertikal.
Namun, jika elemen penampung lebih lebar dari 25em
, gambar dan teks akan muncul berdampingan.
Kueri penampung memungkinkan Anda menata gaya komponen dengan cara yang independen. Lebar area pandang tidak lagi penting. Anda dapat menulis aturan berdasarkan lebar elemen penampung.
Menggabungkan kueri
Anda dapat menggunakan kueri media untuk tata letak halaman, dan kueri penampung untuk komponen di dalam halaman.
Di sini, struktur keseluruhan halaman memiliki elemen main
dan elemen aside
.
Ada objek media dalam kedua elemen.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Kueri media menerapkan tata letak petak ke elemen main
dan aside
saat area tampilan lebih lebar dari 45em
.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
Aturan kueri penampung untuk objek media tetap sama:
hanya terapkan tata letak flexbox horizontal jika elemen penampung lebih lebar dari 25em
.
Kueri container merupakan terobosan untuk tata letak mikro. Komponen Anda dapat berdiri sendiri, terlepas dari area pandang browser.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang tata letak mikro.
{i>Grid<i} dan {i>flexbox<i} berguna untuk {i>layout<i} mikro?
Sebelumnya, Anda telah mempelajari tata letak makro tingkat halaman. Sekarang Anda tahu tentang {i>layout<i} mikro tingkat komponen. Selanjutnya, Anda akan mendalami elemen-elemen penyusun konten Anda. Anda akan mempelajari cara membuat gambar menjadi responsif. Sekarang mari kita pelajari tipografi responsif.