Tata letak makro menjelaskan organisasi antarmuka Anda yang lebih besar dan mencakup seluruh halaman.
Sebelum menerapkan tata letak apa pun, Anda harus memastikan bahwa alur konten Anda masuk akal. Urutan default satu kolom ini adalah yang akan didapatkan layar yang lebih kecil.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Saat Anda mengatur komponen tingkat halaman individual ini, Anda mendesain tata letak makro: tampilan tingkat tinggi halaman Anda. Dengan menggunakan kueri media, Anda dapat memberikan aturan dalam CSS yang menjelaskan cara tampilan ini menyesuaikan dengan ukuran layar yang berbeda.
Petak
Petak CSS adalah alat yang sangat baik untuk menerapkan tata letak ke halaman Anda. Pada contoh sebelumnya, misalnya Anda menginginkan tata letak dua kolom setelah lebar layar yang tersedia cukup. Untuk menerapkan tata letak dua kolom ini setelah browser cukup lebar, gunakan kueri media untuk menentukan gaya petak di atas breakpoint yang ditentukan.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Untuk tata letak tertentu ini, Anda juga dapat menggunakan flexbox. Gaya akan terlihat seperti ini:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Namun, versi flexbox memerlukan lebih banyak CSS. Setiap kolom memiliki aturan terpisah untuk menjelaskan jumlah ruang yang harus ditempati. Dalam contoh petak, informasi yang sama dienkapsulasi dalam satu aturan untuk elemen penampung.
Apakah Anda memerlukan kueri media?
Anda mungkin tidak selalu perlu menggunakan kueri media. Kueri media berfungsi dengan baik saat Anda menerapkan perubahan pada beberapa elemen, tetapi jika tata letak perlu sering diupdate, kueri media Anda dapat menjadi tidak terkendali dengan banyak breakpoint.
Misalnya, Anda memiliki halaman yang penuh dengan komponen kartu.
Kartu tidak pernah lebih lebar dari 15em, dan Anda ingin menempatkan kartu sebanyak mungkin dalam satu baris.
Anda dapat menulis kueri media dengan breakpoint seperti 30em, 45em, dan 60em, tetapi hal ini cukup membosankan dan sulit dipertahankan.
Sebagai gantinya, Anda dapat menerapkan aturan agar kartu itu sendiri otomatis menempati jumlah ruang yang tepat.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Anda dapat mencapai tata letak yang serupa dengan flexbox. Dalam hal ini, jika tidak ada cukup kartu untuk mengisi baris terakhir, kartu yang tersisa akan direntangkan untuk mengisi ruang yang tersedia, bukan berbaris dalam kolom. Jika Anda ingin menyusun baris dan kolom, gunakan petak.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Dengan menerapkan beberapa aturan cerdas di flexbox atau petak, Anda dapat mendesain tata letak makro dinamis dengan CSS minimal dan tanpa kueri media. Hal ini akan mengurangi pekerjaan Anda—Anda membuat browser melakukan perhitungan. Untuk melihat beberapa contoh tata letak CSS modern yang fleksibel tanpa memerlukan kueri media, lihat 1linelayouts.com.
Uji pemahaman Anda
Uji pengetahuan Anda tentang tata letak makro.
Kalimat mana yang paling tepat menggambarkan tata letak makro?
Apakah tata letak makro selalu menggunakan kueri media untuk beradaptasi dengan ukuran layar yang berbeda?
Setelah mendapatkan beberapa ide untuk tata letak makro tingkat halaman, perhatikan komponen dalam halaman. Ini adalah ranah tata letak mikro.