Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

CSS Grid Dasar: Membangun Struktur Dua Dimensi

Memahami Grid dimulai dengan membedakan antara elemen pembungkus (Container) dan elemen yang dibungkus (Items).

1. Grid Container (Sang Induk)

Untuk memulai, Anda harus mendefinisikan elemen sebagai container grid dengan properti display: grid;. Begitu diaktifkan, elemen tersebut akan memiliki jalur horizontal (baris) dan vertikal (kolom).

2. Mendefinisikan Kolom dan Baris

Dua properti paling sakti di sini adalah grid-template-columns dan grid-template-rows.

A. Grid Template Columns

Menentukan berapa banyak kolom yang Anda inginkan dan seberapa lebar masing-masing kolom tersebut.

.container { display: grid; /* Membuat 3 kolom: 200px di kiri, sisa ruang di tengah, 150px di kanan */ grid-template-columns: 200px 1fr 150px;
}

B. Grid Template Rows

Menentukan tinggi dari baris-baris yang ada.

.container { /* Membuat 2 baris dengan tinggi masing-masing 100px dan 300px */ grid-template-rows: 100px 300px;
}

3. Satuan Fraksi (fr)

Grid memperkenalkan satuan baru yaitu fr (fractional unit). Satuan ini sangat cerdas karena ia membagi ruang kosong yang tersedia secara proporsional.

• grid-template-columns: 1fr 1fr 1fr; akan membuat 3 kolom dengan lebar yang sama persis.

• grid-template-columns: 1fr 2fr; akan membuat kolom kedua dua kali lebih lebar dari kolom pertama.

Tutorial: Membuat Layout Portal Berita Sederhana

Mari kita terapkan untuk membangun kerangka dasar SatuMedia. Kita ingin ada Header, Sidebar (kiri), Konten Utama (tengah), dan Iklan (kanan).

Struktur HTML

<div class="main-grid"> <header class="item header">Headerheader> <aside class="item sidebar">Sidebaraside> <main class="item content">Main Contentmain> <aside class="item ads">Adsaside>
div>

Kode CSS

.main-grid { display: grid; /* Kolom: Sidebar(200px), Content(Fleksibel), Ads(150px) */ grid-template-columns: 200px 1fr 150px; /* Jarak antar elemen */ gap: 15px; } .header { /* Mengatur header agar membentang di semua kolom (3 kolom) */ grid-column: 1 / 4; background: #3498db; height: 60px;
} .item { color: white; padding: 20px; text-align: center;
}

Tips Pro untuk Developer

1. Fungsi Repeat(): Jika Anda punya banyak kolom dengan ukuran sama, gunakan repeat().

   • grid-template-columns: repeat(12, 1fr); (Membuat 12 kolom yang sama rata).

2. Gap adalah Sahabat: Sama seperti Flexbox, gunakan gap untuk mengatur jarak antar kotak Grid tanpa perlu memikirkan margin luar.

3. Inspect Element: Gunakan fitur Grid Inspector di browser (Chrome/Firefox) untuk melihat garis-garis pandu Grid Anda secara visual. Ini akan sangat memudahkan proses debugging layout yang kompleks.