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

Grid Lanjutan: Fr Unit, Minmax(), dan Repeat()

Ketiga fitur ini dirancang untuk menangani dinamika ruang pada web modern, di mana konten dan ukuran perangkat selalu berubah.

1. Fr Unit (Fractional Unit)

fr mewakili sebagian dari ruang kosong yang tersedia di dalam kontainer grid. Berbeda dengan persen (%), fr secara cerdas memperhitungkan jarak (gap) antar elemen.

• grid-template-columns: 1fr 1fr 1fr; -> Membagi ruang menjadi 3 bagian yang sama persis.

• grid-template-columns: 2fr 1fr; -> Kolom pertama akan mengambil 2/3 ruang, kolom kedua 1/3 ruang.

2. Fungsi Repeat()

Fungsi ini sangat berguna untuk menghindari penulisan nilai yang berulang-ulang. Jika Anda ingin membuat 12 kolom yang sama, Anda tidak perlu menulis 1fr sebanyak dua belas kali.

• Sintaks: repeat(jumlah, ukuran)

• Contoh: grid-template-columns: repeat(12, 1fr);

3. Fungsi Minmax()

minmax() memungkinkan Anda menetapkan rentang ukuran untuk jalur grid (baris atau kolom). Jalur tersebut akan sefleksibel mungkin, namun tidak akan pernah melampaui batas minimum atau maksimum yang ditentukan.

• Sintaks: minmax(minimal, maksimal)

• Contoh: grid-template-columns: 200px minmax(300px, 1fr);

  • Kolom kedua akan mencoba mengambil sisa ruang (1fr), tetapi tidak akan pernah mengecil di bawah 300px.

Tutorial: Membuat Grid Kartu "Auto-Responsive"

Mari kita gunakan teknik tercanggih dalam CSS Grid: menggabungkan repeat() dengan kata kunci auto-fill atau auto-fit dan < code data-path-to-node="20" data-index-in-node="121">minmax(). Ini akan membuat grid yang otomatis menyesuaikan jumlah kolom berdasarkan lebar layar tanpa satu pun Media Query!

Struktur HTML

<div class="news-container"> <div class="card">Berita 1div> <div class="card">Berita 2div> <div class="card">Berita 3div> <div class="card">Berita 4div>
div>

Kode CSS

.news-container { display: grid; /* Logika Ajaib: - auto-fit: buat kolom sebanyak mungkin yang muat. - minmax(250px, 1fr): setiap kolom minimal 250px, tapi jika ada sisa ruang, boleh melebar (1fr). */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px;
} .card { background: #3498db; color: white; padding: 30px; text-align: center; border-radius: 8px;
}

Tips Pro untuk Developer

1. Auto-Fill vs Auto-Fit:

   • auto-fill: Akan terus membuat slot kolom meskipun kosong (jika ada ruang).

   • auto-fit: Akan membuang slot kosong dan memaksa kolom yang ada untuk melebar memenuhi ruang. Untuk kartu berita di SatuMedia, auto-fit biasanya adalah pilihan terbaik.

2. Mencampur Satuan: Jangan ragu untuk mencampur satuan. grid-template-columns: 100px repeat(2, 1fr) 20%; adalah kode yang valid dan sangat berguna untuk layout yang kompleks.

3. Gunakan fr untuk Tinggi: Anda juga bisa menggunakan fr pada grid-template-rows jika kontainer induknya memiliki tinggi (height) yang pasti.