Unknown user at 08:19, 5 April 2025

2025-04-05T08:19:37Z

← Older revision		Revision as of 08:19, 5 April 2025
Line 1:		Line 1:
	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 ~~alat~~ di Ubuntu 24.04 ~~tanpa menggunakan perangkat lunak dari Microsoft~~.		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==		==1. Pengenalan Flexbox==

Unknown user: /* b. Properti Penting pada Container Flex */

2025-04-05T07:42:20Z

b. Properti Penting pada Container Flex

← Older revision		Revision as of 07:42, 5 April 2025
Line 19:		Line 19:
	* `flex-wrap`: Menentukan apakah item flex harus membungkus ke baris/kolom baru jika ruang tidak cukup. Nilai: `nowrap`, `wrap`, `wrap-reverse`.		* `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		===c. Contoh Implementasi Flexbox===

	'''Struktur HTML:'''		'''Struktur HTML:'''

Unknown user at 07:42, 5 April 2025

2025-04-05T07:42:04Z

Show changes

Unknown user: Created page with "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, bese..."

2025-04-05T06:13:11Z

Created page with "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, bese..."

New page

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 alat di Ubuntu 24.04 tanpa menggunakan perangkat lunak dari Microsoft.

## 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:**

```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>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
```


**CSS (style.css):**

```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

**Struktur HTML:**

```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh CSS Grid</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
```


**CSS (style.css):**

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

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
padding: 10px;
background-color: #f0f0f0;
}

.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
```


Flexbox dan Grid untuk tata letak responsif - Revision history

Unknown user at 08:19, 5 April 2025

Unknown user: /* b. Properti Penting pada Container Flex */

Unknown user at 07:42, 5 April 2025

Unknown user: Created page with "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, bese..."

Unknown user: Created page with "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, bese..."