CSS Layout

CSS Layout

CSS layout itu cara kita mengatur posisi elemen di halaman web. Kita bisa bikin elemen-elemen itu tersusun rapi.

• Metode Layout:

  • Flexbox: Memudahkan ngatur elemen dalam satu baris atau kolom.

  • Grid: Ngatur elemen dalam dua dimensi (baris dan kolom).

  • Positioning: Pakai properti position (static, relative, absolute, fixed) buat ngatur posisi elemen.

Model Layout

1.1. Aliran Normal

Ini adalah cara default. Jadi, elemen yang kita buat akan ditampilkan satu per satu. Misalnya, elemen blok (seperti <div>) akan ditaruh di bawah satu sama lain, sedangkan elemen inline (seperti <span>) akan ditaruh berdampingan.

1.2. Penempatan (Positioning)

Kita bisa mengatur posisi elemen dengan beberapa cara:

static: Ini adalah posisi biasa. Elemen akan mengikuti aliran normal.

relative: Elemen ini bisa digeser sedikit dari posisinya yang biasa. Misalnya, kita bisa menggesernya ke atas atau ke bawah.

absolute: Elemen ini bisa kita tempatkan di mana saja, tergantung elemen lain yang ada di sekitarnya.

fixed: Elemen ini akan tetap di tempatnya, bahkan saat kita scroll halaman. Misalnya, bisa digunakan untuk menu yang selalu terlihat.

sticky: Elemen ini akan berperilaku seperti relative sampai kita scroll ke titik tertentu, lalu dia akan "menempel" di tempatnya.

HTML:

CSS:

2. Flexbox

Flexbox itu cara yang mudah untuk mengatur elemen dalam satu baris atau kolom. Ini sangat membantu untuk membuat layout yang responsif, artinya bisa menyesuaikan dengan ukuran layar.

3. Grid Layout

Grid Layout adalah cara yang lebih canggih untuk mengatur elemen dalam dua dimensi, jadi kita bisa membuat kolom dan baris. Ini sangat berguna untuk layout yang lebih kompleks.

4. Media Queries

Media queries itu seperti trik untuk membuat halaman kita responsif. Kita bisa mengubah gaya elemen berdasarkan ukuran layar. Jadi, tampilan di ponsel bisa berbeda dengan tampilan di komputer.