Tata letak makro

Tata letak makro menjelaskan organisasi antarmuka Anda yang lebih besar dan mencakup seluruh halaman.

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

Sebelum menerapkan tata letak apa pun, Anda harus memastikan bahwa alur konten Anda masuk akal. Pengurutan default satu kolom ini adalah yang akan diperoleh layar yang lebih kecil.

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

Saat mengatur setiap komponen tingkat halaman ini, Anda sedang mendesain tata letak makro: tampilan tingkat tinggi halaman Anda. Dengan menggunakan kueri media, Anda dapat memberikan aturan dalam CSS yang menjelaskan bagaimana tampilan ini harus menyesuaikan dengan ukuran layar yang berbeda.

Petak

Petak CSS adalah alat yang sangat baik untuk menerapkan tata letak ke halaman Anda. Pada contoh di atas, 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 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. 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 mendeskripsikan jumlah ruang yang harus digunakannya. 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 berfungsi dengan baik saat Anda menerapkan perubahan pada beberapa elemen, tetapi jika tata letak perlu diperbarui banyak, kueri media Anda dapat menjadi tidak terkendali dengan banyak titik henti sementara.

Misalnya, Anda memiliki halaman yang 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, tetapi cara 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 diregangkan untuk mengisi ruang yang tersedia, bukan berbaris dalam kolom. Jika Anda ingin menyelaraskan 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 hanya perlu membuat browser melakukan penghitungan. Untuk melihat beberapa contoh tata letak CSS modern yang fleksibel tanpa memerlukan kueri media, lihat 1linelayouts.com.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang tata letak makro.

Manakah kalimat yang paling tepat mendeskripsikan tata letak makro?

Tata letak tingkat tinggi yang mencakup sebagian besar layar.
Tata letak tingkat rendah yang menutupi sebagian kecil layar.
Tata letak yang berisi tata letak lain.
Saat desain menggunakan flexbox atau petak.

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

Salah
Benar

Sekarang, setelah Anda mendapatkan beberapa ide untuk tata letak makro tingkat laman, arahkan perhatian Anda ke komponen dalam laman. Ini adalah wilayah tata letak mikro.