Tata letak makro menggambarkan pengaturan antarmuka Anda yang lebih besar di seluruh halaman.
Sebelum menerapkan tata letak apa pun, Anda harus memastikan bahwa alur konten Anda masuk akal. Urutan {i>default<i} kolom tunggal ini adalah apa 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, saat Anda mendesain tata letak makro, yaitu tampilan tingkat tinggi dari halaman Anda. Dengan menggunakan kueri media, Anda dapat memberikan aturan di CSS yang menjelaskan bagaimana tampilan ini harus disesuaikan dengan berbagai ukuran layar.
Petak
Petak CSS adalah alat yang sangat baik untuk menerapkan tata letak ke halaman Anda. Pada contoh di atas, katakanlah Anda menginginkan tata letak dua kolom setelah ada cukup lebar layar yang tersedia. Untuk menerapkan tata letak dua kolom ini setelah browser cukup lebar, menggunakan kueri media untuk mendefinisikan gaya grid di atas titik henti sementara yang ditetapkan.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Untuk tata letak khusus ini, Anda juga dapat menggunakan flexbox. Gayanya 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 berapa banyak ruang yang harus digunakan. Dalam contoh petak, informasi yang sama dienkapsulasi dalam satu aturan untuk elemen penampung.
Apakah Anda memerlukan kueri media?
Anda mungkin tidak perlu selalu menggunakan kueri media. Kueri media bekerja dengan baik ketika Anda menerapkan perubahan pada beberapa elemen, tetapi jika tata letak perlu banyak diperbarui, kueri media Anda bisa menjadi tidak terkendali dengan banyak titik henti sementara.
Misalnya, Anda memiliki satu halaman penuh dengan komponen kartu.
Kartu tidak boleh lebih lebar dari 15em
, dan Anda ingin menempatkan kartu sebanyak mungkin dalam satu baris.
Anda dapat menulis kueri media dengan titik henti sementara 30em
, 45em
, 60em
,
dan seterusnya, tapi hal ini cukup membosankan
dan sulit dikelola.
Sebagai gantinya, Anda dapat menerapkan aturan agar kartu itu sendiri secara otomatis menggunakan 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 menyejajarkan 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 {i>flexbox<i} atau {i>grid<i}, Anda dapat merancang tata letak makro dinamis dengan CSS minimal dan tanpa kueri media. Hal ini akan mengurangi pekerjaan Anda—Anda hanya perlu membuat browser melakukan penghitungan. Untuk melihat beberapa contoh tata letak CSS modern yang mudah disesuaikan tanpa memerlukan kueri media, lihat 1linelayouts.com.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang tata letak makro.
Manakah kalimat yang paling tepat mendeskripsikan tata letak makro?
Tata letak makro selalu menggunakan kueri media untuk beradaptasi dengan ukuran layar yang berbeda?
Sekarang Anda memiliki beberapa ide untuk tata letak makro tingkat laman, alihkan perhatian Anda ke komponen di dalam halaman. Inilah ranah tata letak mikro.