GridLesson 316Preview gratis
Zig Zag Layout
Lesson ini bagian dari How To · Semua level
Ringkasan
Zig zag layout menyusun baris-baris konten secara bergantian: gambar di kiri lalu teks di kanan, kemudian teks di kiri dan gambar di kanan. Pola ini memberi ritme visual dan mencegah halaman terasa monoton. Gunakan flexbox dengan row-reverse atau CSS Grid dengan urutan area untuk membuat variasi tersebut.
Poin kunci
- Setiap baris zig zag terdiri dari gambar dan teks yang berdampingan
- Baris genap dapat dibalik dengan flex-direction: row-reverse
- CSS Grid juga dapat memakai grid-template-areas bergantian
- Pada layar kecil, tumpuk gambar dan teks dalam satu kolom
- Urutan DOM tetap harus logis meskipun tampilan dibalik
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.