Tata letak mikro

Ketika memikirkan tata letak, kita sering memikirkan desain tingkat halaman. Namun, komponen yang lebih kecil di dalam halaman dapat memiliki tata letak mandiri.

Idealnya, tata letak tingkat komponen ini akan menyesuaikan sendiri secara otomatis, apa pun posisinya di halaman. Mungkin ada situasi saat Anda tidak mengetahui apakah suatu komponen akan ditempatkan di dalam kolom konten utama atau di sidebar, atau keduanya. Tanpa mengetahui pasti di mana komponen akan muncul, Anda perlu memastikan komponen dapat menyesuaikan dirinya sendiri dengan container-nya.

Tata letak dua kolom, satu lebar dan satu sempit. Objek media ditata secara berbeda bergantung pada apakah objek tersebut berada di kolom lebar atau sempit.

Grid

Petak CSS tidak hanya untuk tata letak tingkat halaman. Ia juga bekerja dengan baik untuk komponen-komponen yang ada di dalamnya.

Dalam contoh ini, elemen semu ::before dan ::after membuat garis dekoratif di kedua sisi judul. Judulnya sendiri adalah penampung petak. Elemen individu 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;
}
Alat developer di Firefox menampilkan overlay petak. Alat developer di Chrome menampilkan overlay petak.
Browser desktop seperti Firefox dan Chrome memiliki alat developer yang dapat menampilkan garis petak dan area yang ditempatkan pada desain Anda.

Pelajari cara memeriksa tata letak petak di Chrome DevTools.

Kotak Flex

Seperti namanya, flexbox memungkinkan Anda membuat komponen yang fleksibel. Anda dapat mendeklarasikan elemen mana dalam komponen yang harus memiliki ukuran minimum atau maksimum dan membiarkan elemen lainnya ditekuk agar sesuai.

Dalam contoh ini, gambar menempati seperempat dari ruang yang tersedia dan teks menempati tiga perempat lainnya. Namun, ukuran 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;
}
Alat pengembang di Firefox menampilkan overlay flexbox. Alat developer di Chrome menampilkan overlay flexbox.
Alat developer di Firefox dan Chrome dapat membantu Anda memvisualisasikan bentuk komponen flexbox.

Pelajari cara memeriksa tata letak flexbox di Chrome DevTools.

Kueri penampung

Flexbox memungkinkan Anda mendesain dari konten. Anda dapat menentukan parameter elemen (seberapa sempit elemen tersebut, lebarnya seharusnya), dan membiarkan browser mengetahui implementasi akhir.

Namun, komponen itu sendiri tidak memahami konteksnya. ID tersebut tidak tahu apakah file tersebut 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 ukuran area pandang yang ada di dalamnya.

Dengan tata letak halaman, Anda benar-benar mengetahui lebar penampung karena penampungnya adalah area pandang browser; kueri media melaporkan dimensi penampung tingkat halaman.

Untuk melaporkan dimensi penampung, gunakan kueri penampung.

Untuk memulai, tentukan elemen mana yang akan berfungsi sebagai container.

main,
aside {
  container-type: inline-size;
}

Ini berarti Anda dapat mengkueri dimensi inline. Untuk dokumen berbahasa Inggris, posisi tersebut adalah sumbu horizontal. Anda akan mengubah gaya berdasarkan lebar penampung.

Jika komponen ada di dalam salah satu penampung tersebut, Anda dapat menerapkan gaya dengan cara yang sangat mirip dengan 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 akan diterapkan. Gambar dan teks yang muncul disusun secara vertikal.

Namun, jika elemen penampung lebih lebar dari 25em, gambar dan teks akan muncul berdampingan.

Kueri penampung memungkinkan Anda menata gaya komponen dengan cara yang independen. Lebar area pandang tidak lagi penting. Anda dapat menulis aturan berdasarkan lebar elemen penampung.

Dua penampung dengan ukuran berbeda.

Menggabungkan kueri

Anda dapat menggunakan kueri media untuk tata letak halaman, dan kueri penampung untuk komponen di 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 tampilan 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 terapkan tata letak flexbox horizontal jika elemen penampung lebih lebar dari 25em.

Tata letak dua kolom, satu lebar dan satu sempit. Objek media ditata secara berbeda bergantung pada apakah objek tersebut berada di kolom lebar atau sempit.

Kueri container merupakan terobosan untuk tata letak mikro. Komponen Anda dapat berdiri sendiri, terlepas dari area pandang browser.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang tata letak mikro.

{i>Grid<i} dan {i>flexbox<i} berguna untuk {i>layout<i} mikro?

Benar
🎉
Salah
🎉 Grid dan flexbox sangat berguna, bahkan untuk tata letak yang 'terkecil'.

Sebelumnya, Anda telah mempelajari tata letak makro tingkat halaman. Sekarang Anda tahu tentang {i>layout<i} mikro tingkat komponen. Selanjutnya, Anda akan mendalami elemen-elemen penyusun konten Anda. Anda akan mempelajari cara membuat gambar menjadi responsif. Sekarang mari kita pelajari tipografi responsif.