Pengenalan Modul Tata Letak

Oleh Gendis Widodari

Melalui kelas ini, kamu diajak untuk:

  • Mengenal jenis-jenis modul tata letak flexbox dan grid.
  • Mengidentifikasi elemen-elemen dalam modul tata letak flexbox dan grid.

Fungsi Dasar

Ketika mendesain suatu halaman web, kita ingin elemen-elemen dalam web kita tertata rapi. Di kelas CSS dasar, kita telah mengenal margin dan padding untuk mengatur elemen. Tapi bayangkan ada banyak sekali elemen yang ingin kita atur tata letaknya. Mengatur setiap elemen dengan margin dan padding akan sangat melelahkan. Untuk menghemat waktu dan tenaga, kita bisa menggunakan flexbox dan/atau grid.

Tentang Flexbox dan Grid

Flexbox dan grid adalah modul yang memudahkan perancangan struktur tata letak responsif dan fleksibel. Perbedaan antara keduanya terletak di jumlah arah item yang diatur.

Ketuk untuk melihat lebih jauh.

Flexbox
Flexbox bisa mengatur tata letak berdasarkan kolom atau baris. Dengan kata lain, flexbox hanya bisa mengatur salah satu.
Grid
Grid dapat mengatur tata letak berdasarkan kolom dan baris. Jadi, grid bisa mengatur keduanya sekaligus.

Kapan Menggunakan Flexbox dan Grid?

Pertanyaan yang kemudian muncul adalah, kapan kita menggunakan flexbox dan kapan kita menggunakan grid? Sesuai dengan fungsinya, flexbox digunakan ketika kita hanya perlu mengatur kolom atau baris, sementara grid digunakan ketika kita ingin mengatur kolom dan baris.

Geser untuk melihat contoh penggunaan keduanya dalam halaman web.

Flexbox

Flexbox biasa dipakai untuk membentuk layout kolum seperti tombol menyamping.

Grid

Fungsi grid menampilkan perpaduan kolom dan baris.

Elemen-elemen Flexbox dan Grid

Baik flexbox maupun grid sama-sama terdiri dari dua elemen, yakni container dan item.

Ketuk untuk melihat lebih jauh.

Container
Container adalah elemen parent dari flexbox dan grid. Container berfungsi sebagai pembungkus dari item.
Item
Item adalah elemen child dari flexbox dan grid. Item bisa lebih dari satu (sesuai kebutuhan) dan dibungkus oleh container.

Selayang Pandang

  • Flexbox dan grid adalah modul tata letak yang fleksibel dan praktis digunakan tanpa harus mengatur elemen satu per satu.
  • Flexbox digunakan untuk mengatur baris atau kolom (salah satu), sementara grid digunakan untuk mengatur baris dan kolom (keduanya).

Kuis

Dari beberapa contoh kasus di bawah ini, kapan kita harus menggunakan grid ketimbang flexbox?

Selamat, Anda telah menyelesaikan pelajaran ini
Klik untuk menyelesaikan