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, terlepas dari 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 berakhir, Anda perlu memastikan bahwa komponen dapat menyesuaikan diri dengan penampungnya.

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, Anda dapat menggunakan flexbox untuk membuat komponen fleksibel. Anda dapat mendeklarasikan elemen mana dalam komponen yang harus memiliki ukuran minimum atau maksimum, dan membiarkan elemen lainnya ditekuk agar sesuai dengan semestinya.

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 Anda (seberapa sempit seharusnya, seberapa lebar elemen tersebut) 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 berfungsi sebagai container.

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

Artinya, Anda ingin mengkueri dimensi inline. Untuk dokumen berbahasa Inggris, format tersebut adalah sumbu horizontal. Anda akan mengubah gaya berdasarkan lebar penampung.

Jika komponen ada di dalam salah satu penampung tersebut, Anda dapat menerapkan gaya seperti cara menerapkan 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.

Dengan kueri penampung, Anda dapat menata gaya komponen secara terpisah. Anda dapat menulis aturan berdasarkan lebar elemen yang memuatnya; lebar area pandang tidak lagi penting.

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 pandang 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 yang memuatnya 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
🎉 Benar.
Salah
Salah. {i>Grid<i} dan {i>flexbox<i} sangat berguna, bahkan untuk tata letak yang 'terkecil'.

Sebelumnya, Anda telah mempelajari tata letak makro tingkat halaman. Sekarang Anda tahu tentang tata letak mikro tingkat komponen.

Selanjutnya, Anda akan mendalami elemen penyusun konten dan mempelajari cara membuat gambar menjadi responsif. Pertama, Anda akan belajar tentang tipografi responsif.