Grid dan Flexbox

CSS Grid dan Flexbox adalah dua teknik tata letak yang sangat kuat dalam desain web modern. Mereka memungkinkan Anda untuk mengatur elemen-elemen HTML dengan cara yang fleksibel dan efisien. Di bawah ini, saya akan memberikan tutorial singkat tentang cara menggunakan Grid dan Flexbox.

CSS Grid

1. Membuat Grid Container

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Misalnya, membuat 3 kolom dengan lebar yang sama */
  grid-gap: 20px; /* Jarak antara grid items */
}

2. Menambahkan Item ke dalam Grid

.grid-item {
  grid-column: span 2; /* Menentukan seberapa banyak kolom yang ingin digunakan */
  grid-row: span 1; /* Menentukan seberapa banyak baris yang ingin digunakan */
}


Flexbox

1. Membuat Flex Container

.flex-container {
  display: flex;
  flex-direction: row; /* Atur arah kontainer (row, column, row-reverse, atau column-reverse) */
  justify-content: space-between; /* Posisi item secara horizontal */
  align-items: center; /* Posisi item secara vertikal */
}

2. Menambahkan Item ke dalam Flex Container

.flex-item {
  flex: 1; /* Menentukan seberapa banyak ruang yang diambil oleh item (1 = sama rata) */
}

Contoh Penggunaan dalam HTML

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Semoga tutorial ini membantu Anda memahami penggunaan dasar CSS Grid dan Flexbox dalam desain web. Anda dapat menyesuaikan properti CSS sesuai kebutuhan proyek Anda.

PREVIOUS
NEXT