Saat memikirkan tata letak, kita sering kali memikirkan desain tingkat halaman. Namun, komponen yang lebih kecil dalam halaman dapat memiliki tata letak mandirinya sendiri.
Idealnya, tata letak tingkat komponen ini akan menyesuaikan diri secara otomatis, terlepas dari posisinya di halaman. Mungkin ada situasi saat Anda tidak tahu apakah komponen akan ditempatkan di kolom konten utama atau sidebar atau keduanya. Tanpa mengetahui secara pasti di mana komponen akan berakhir, Anda harus memastikan bahwa komponen dapat menyesuaikan diri dengan penampungnya.
Petak
CSS grid tidak hanya untuk tata letak tingkat halaman. Slot ini juga berfungsi dengan baik untuk komponen yang berada di dalamnya.
Dalam contoh ini, pseudo-element ::before dan ::after membuat garis dekoratif di kedua sisi judul. Judul itu sendiri adalah penampung petak. Setiap elemen
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.
Flexbox
Seperti namanya, Anda dapat menggunakan flexbox untuk membuat komponen Anda fleksibel. Anda dapat mendeklarasikan elemen mana dalam komponen yang harus memiliki ukuran minimum atau maksimum dan membiarkan elemen lainnya menyesuaikan diri dengan tepat.
Dalam contoh ini, gambar menempati seperempat ruang yang tersedia dan teks menempati tiga perempat ruang lainnya. Namun, 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 container
Flexbox memungkinkan Anda mendesain dari konten. Anda dapat menentukan parameter elemen (seberapa sempit atau lebar elemen tersebut) dan membiarkan browser menentukan penerapan akhirnya.
Namun, komponen itu sendiri tidak mengetahui konteksnya. Elemen ini tidak tahu apakah sedang 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 sekadar ukuran area tampilan tempat komponen tersebut berada.
Dengan tata letak halaman, Anda mengetahui lebar penampung karena penampungnya adalah area tampilan browser; kueri media melaporkan dimensi penampung tingkat halaman.
Untuk melaporkan dimensi penampung apa pun, gunakan kueri penampung.
Untuk memulai, tentukan elemen mana yang berfungsi sebagai penampung.
main,
aside {
container-type: inline-size;
}
Artinya, Anda ingin membuat kueri dimensi inline. Untuk dokumen berbahasa Inggris, sumbu silang adalah sumbu horizontal. Anda akan mengubah gaya berdasarkan lebar penampung.
Jika komponen berada di dalam salah satu penampung tersebut, Anda dapat menerapkan gaya dengan cara yang sama seperti cara Anda menerapkan 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 diterapkan. Gambar dan teks muncul secara vertikal.
Namun, jika elemen penampung lebih lebar dari 25em, gambar dan teks akan muncul berdampingan.
Dengan kueri penampung, Anda dapat menata gaya komponen secara independen. Anda dapat menulis aturan berdasarkan lebar elemen penampung; lebar viewport tidak lagi penting.
Menggabungkan kueri
Anda dapat menggunakan kueri media untuk tata letak halaman dan kueri penampung untuk komponen 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 pandang 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 menerapkan tata letak flexbox horizontal jika elemen penampung lebih lebar dari 25em.
Kueri penampung adalah terobosan besar untuk tata letak mikro. Komponen Anda dapat bersifat mandiri, terlepas dari area pandang browser.
Uji pemahaman Anda
Uji pengetahuan Anda tentang tata letak mikro.
Apakah petak dan flexbox berguna untuk tata letak mikro?
Sebelumnya, Anda telah mempelajari tata letak makro tingkat halaman. Sekarang Anda telah mengetahui tata letak mikro tingkat komponen.
Selanjutnya, Anda akan mempelajari lebih dalam elemen dasar konten dan mempelajari cara membuat gambar responsif. Pertama, Anda akan mempelajari tipografi responsif.