Pola: Article Layout

Artikel panjang menuntut layout yang berbeda dari landing page. Kolom bacanya harus sempit agar mata tidak berjalan terlalu jauh per baris, tetapi gambar, video, dan blok kutipan sering tampil lebih baik bila lebih lebar dari teks di sekitarnya. Kedua kebutuhan yang tampak bertentangan itu diselesaikan satu grid: kolom pertama untuk prosa, kolom kedua dibiarkan sebagai ruang sisa, dan elemen istimewa membentang melewatinya.

Kolom Prosa dan Ruang Sisa #

.layout-artikel {
  display: grid;
  grid-template-columns: minmax(0, 65ch) 1fr;
}

.layout-artikel > * {
  grid-column: 1;
}

Mari kita telaah dua deklarasinya:

1. minmax(0, 65ch) memadukan dua keputusan sekaligus: 65ch menjaga panjang baris ideal untuk keterbacaan, dan minimum 0 mencegah konten lebar seperti blok kode memaksa kolom meluber — jebakan 1fr yang sudah kita kenal pada layout sidebar.
2. grid-column: 1 pada semua anak memaksa setiap elemen masuk kolom pertama, satu baris per elemen. Tanpa aturan ini, penempatan otomatis grid akan mengisi kolom kedua dengan elemen berikutnya dan halaman berubah menjadi dua kolom konten.

Kolom kedua yang tampak “terbuang” justru fungsional: dia memberi ruang lega di layar lebar dan menjadi area tempat elemen istimewa boleh berkembang.

Figure yang Menembus Keluar #

Media yang butuh ruang lebih lebar cukup diberi penempatan garis yang membentang dua kolom:

.layout-artikel figure {
  grid-column: 1 / -1;
  margin: 0;
}

.layout-artikel figure img {
  display: block;
  width: 100%;
  border-radius: 12px;
}

.layout-artikel figure figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #4b5563;
}

Selektor 1 / -1 berarti “dari garis kolom pertama sampai garis terakhir”, pola penempatan garis yang kita pelajari di chapter Grid Column dan Grid Row. Karena kolom sisa lebarnya 1fr, gambar ikut membesar di layar lebar dan menyusut di layar sempit — perilaku responsif tanpa media query. margin: 0 pada figure menghapus margin bawaan browser agar ritme vertikalnya mengikuti jarak elemen lain. Demo berikut menampilkan potongan artikel lengkap. Perhatikan gambar yang lebih lebar dari kolom teksnya, lalu perlebar bingkai demo: ruang sisa di kanan bertambah sementara panjang baris prosa tidak berubah:

Sentuhan Prosa #

Layout artikel ditutup dengan gaya prosa yang sudah kita kuasai di section Typography:

.prosa {
  line-height: 1.7;
  font-size: 1.0625rem;
}

.prosa p + p {
  margin-top: 1.25em;
}

.prosa a {
  color: #14503a;
}

Tiga deklarasi, tiga alasan yang pernah kita bahas mendalam: line-height tanpa satuan diwariskan sebagai rasio sehingga aman untuk semua ukuran huruf; selektor p + p memberi jarak hanya di antara paragraf; dan warna tautan kontras terhadap teks hitam pekat. Di sinilah pola layout berpapasan dengan tipografi — keduanya wajib siap bila halaman ingin nyaman dibaca.

Kesalahan Umum #

Ringkasan #

Article layout memakai grid dua kolom yang tak seimbang: minmax(0, 65ch) untuk prosa dan 1fr sebagai ruang sisa. Aturan grid-column: 1 menahan semua anak di kolom prosa, dan satu pengecualian 1 / -1 membuka jalan bagi gambar yang menembus keluar. Dengan sentuhan prosa dari section Typography, pola ini siap menjadi kerangka utama halaman blog dan dokumentasi. Chapter berikutnya melompat ke bentuk halaman yang sama sekali berbeda: dua panel yang membagi layar berdua.