Tata letak makro

Tata letak makro menggambarkan pengaturan antarmuka di seluruh halaman yang lebih besar.

{i>Wireframe<i} tata letak dua kolom, di samping tata letak yang sama dengan satu kolom untuk tampilan sempit.

Sebelum menerapkan tata letak apa pun, pastikan alur konten Anda masuk akal. Pengurutan default kolom tunggal ini adalah apa yang akan didapatkan oleh layar yang lebih kecil.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

Saat mengatur komponen-komponen tingkat halaman individual ini, Anda sedang merancang tata letak makro: tampilan tingkat tinggi dari halaman Anda. Dengan menggunakan kueri media, Anda dapat menyediakan aturan dalam CSS yang menjelaskan bagaimana tampilan ini harus disesuaikan dengan berbagai ukuran layar.

Kisi

Petak CSS adalah alat yang tepat untuk menerapkan tata letak ke halaman Anda. Dalam contoh di atas, misalnya Anda menginginkan tata letak dua kolom setelah tersedia cukup lebar layar. Untuk menerapkan tata letak dua kolom ini setelah browser cukup lebar, gunakan kueri media untuk menentukan gaya petak di atas titik henti sementara yang ditentukan.

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Flexbox

Untuk tata letak khusus 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 berapa banyak ruang yang diperlukan. Dalam contoh petak, informasi yang sama dienkapsulasi dalam satu aturan untuk elemen yang memuatnya.

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 diperbarui, kueri media Anda dapat tidak berfungsi dengan banyak titik henti sementara.

Misalnya Anda memiliki satu halaman yang penuh dengan komponen kartu. Kartu tidak pernah lebih lebar dari 15em, dan Anda ingin menempatkan kartu sebanyak mungkin pada satu baris. Anda dapat menulis kueri media dengan titik henti sementara 30em, 45em, 60em, dan sebagainya, tetapi hal ini cukup membosankan dan sulit dikelola.

Sebagai gantinya, Anda dapat menerapkan aturan agar kartu tersebut menggunakan jumlah ruang yang tepat secara otomatis.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Anda dapat membuat 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 berjajar di 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 aturan cerdas di flexbox atau petak, Anda dapat merancang tata letak makro dinamis dengan CSS minimal dan tanpa kueri media apa pun. Cara ini memudahkan Anda—Anda justru membuat browser melakukan penghitungan. Untuk melihat beberapa contoh tata letak CSS modern yang fleksibel tanpa memerlukan kueri media, lihat 1linelayouts.com.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang tata letak makro.

Kalimat mana yang paling menggambarkan tata letak makro?

Tata letak yang berisi tata letak lain.
Coba lagi. Sebagian besar tata letak berisi tata letak lain.
Saat sebuah desain menggunakan {i>flexbox<i} atau {i>grid<i}.
Coba lagi. Tidak ada flexbox atau petak yang memiliki sesuatu yang khusus untuk tata letak makro.
Tata letak level rendah yang menutupi sebagian kecil layar.
Coba lagi.
Tata letak tingkat tinggi yang mencakup sebagian besar layar.
🎉 Tata letak makro adalah tata letak dasar untuk sebuah halaman, yang mencakup sejumlah besar area visual, dan sering disesuaikan dengan kueri media ukuran halaman.

Tata letak makro selalu menggunakan kueri media untuk beradaptasi dengan berbagai ukuran layar?

Benar
Coba lagi. Tata letak makro tidak ditentukan oleh penggunaan kueri medianya.
Salah
🎉 Tata letak makro dapat beradaptasi agar sesuai dengan konten, mengisi ruang yang tersedia, dan lainnya, tanpa kueri media.

Setelah Anda memiliki beberapa ide untuk tata letak makro tingkat halaman, alihkan perhatian ke komponen dalam halaman. Ini adalah ranah tata letak mikro.