GRID GAP

CSS Grid adalah teknologi layout yang kuat dan fleksibel dalam CSS yang memungkinkan kamu membuat interface yang kompleks dengan mudah. Salah satu property penting dalam CSS Grid adalah grid-gap. Artikel ini akan membahas segala hal tentang property grid-gap.

Apa itu Grid Gap?

Grid-gap adalah sebuah property CSS yang digunakan dalam layout CSS Grid untuk membuat jarak atau celah antara baris dan kolom di dalam grid. Ini adalah cara yang mudah dan efisien untuk memberikan jarak antara item grid.

Sebelum CSS Grid level 2, grid-gap dinamakan grid-row-gap dan grid-column-gap untuk jarak antara baris dan kolom. Namun, dalam CSS Grid level 2, dua property ini digantikan oleh grid-gap yang merupakan shorthand untuk kedua property tersebut.

Bagaimana Cara Menggunakan Grid Gap?

Cara umum untuk menggunakan grid-gap adalah dengan menetapkan nilai kepada properti tersebut dalam deklarasi CSS. Nilai yang bisa diberikan bisa berupa nilai panjang (px, em, rem, etc.), persentase, atau fraksi dari ruang yang tersedia.

.grid-container {
  display: grid;
  grid-gap: 10px;
}

Dalam contoh di atas, semua item grid di dalam .grid-container akan memiliki jarak 10px antara baris dan kolom.

Jika kamu ingin memberikan jarak yang berbeda untuk baris dan kolom, kamu bisa memberikan dua nilai untuk grid-gap.

.grid-container {
  display: grid;
  grid-gap: 10px 20px;
}

Dalam contoh ini, jarak antar-baris adalah 10px, dan jarak antar-kolom adalah 20px.

Apa yang Terjadi Jika Hanya Memberikan Satu Nilai?

Jika kamu hanya memberikan satu nilai kepada grid-gap, nilai tersebut akan diterapkan pada kedua baris dan kolom. Jadi grid-gap: 10px; sama dengan grid-gap: 10px 10px;.

Menambahkan grid-gap dalam CSS Grid sangat membantu untuk menjaga konsistensi jarak antara elemen dalam layout grid. Selain itu, penggunaannya yang mudah dan fleksibel membuat penyesuaian jarak menjadi lebih cepat dan efisien.