Flexbox dan Grid untuk tata letak responsif

Untuk modul Flexbox dan Grid untuk Tata Letak Responsif dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai konsep dasar Flexbox dan Grid dalam CSS, beserta contoh implementasi menggunakan tool di Ubuntu 24.04.

1. Pengenalan Flexbox

Flexbox adalah modul tata letak satu dimensi yang memungkinkan pengaturan elemen dalam baris atau kolom dengan fleksibilitas tinggi. Ini sangat berguna untuk membuat desain yang responsif dan dinamis.

a. Konsep Dasar Flexbox

Container Flex: Elemen induk yang menerapkan `display: flex;` pada CSS. Semua elemen anak langsung dari container ini menjadi item flex.
Arah Utama (Main Axis): Arah di mana item flex ditempatkan dalam container. Ditentukan oleh properti `flex-direction`.
Arah Silang (Cross Axis): Arah tegak lurus terhadap arah utama.

b. Properti Penting pada Container Flex

`display: flex;`: Mengubah elemen menjadi container flex.
`flex-direction`: Menentukan arah utama. Nilai umum: `row`, `row-reverse`, `column`, `column-reverse`.
`justify-content`: Mengatur penyelarasan item sepanjang arah utama. Nilai umum: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`.
`align-items`: Mengatur penyelarasan item sepanjang arah silang. Nilai umum: `stretch`, `flex-start`, `flex-end`, `center`, `baseline`.
`flex-wrap`: Menentukan apakah item flex harus membungkus ke baris/kolom baru jika ruang tidak cukup. Nilai: `nowrap`, `wrap`, `wrap-reverse`.

c. Contoh Implementasi Flexbox

Struktur HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

Item 1

Item 2

Item 3

</body>
</html>

CSS (style.css):

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
}

Penjelasan:

`.container`: Menjadi container flex dengan arah utama horizontal (`row`). Item didistribusikan secara merata dengan ruang di sekitarnya (`space-around`) dan disejajarkan di tengah secara vertikal.
`.item`: Elemen individual dengan latar belakang hijau, teks putih, padding, margin, dan sudut membulat.

2. Pengenalan CSS Grid

CSS Grid adalah modul tata letak dua dimensi yang memungkinkan pengaturan elemen dalam baris dan kolom, memberikan kontrol yang lebih kompleks dibandingkan Flexbox.

a. Konsep Dasar CSS Grid

Container Grid: Elemen induk yang menerapkan `display: grid;` pada CSS. Semua elemen anak langsung dari container ini menjadi item grid.
Garis Grid (Grid Lines): Garis pembatas antara baris dan kolom dalam grid.
Track Grid: Baris atau kolom dalam grid.
Area Grid: Ruang persegi panjang yang terdiri dari beberapa sel grid.

b. Properti Penting pada Container Grid

`display: grid;`: Mengubah elemen menjadi container grid.
`grid-template-columns`: Menentukan jumlah dan ukuran kolom dalam grid.
`grid-template-rows`: Menentukan jumlah dan ukuran baris dalam grid.
`gap`: Menentukan jarak antara baris dan kolom dalam grid.
`justify-items`: Mengatur penyelarasan item grid sepanjang arah horizontal dalam setiap sel grid.
`align-items`: Mengatur penyelarasan item grid sepanjang arah vertikal dalam setiap sel grid.

c. Contoh Implementasi CSS Grid