CSS Grid Pendahuluan

Di artikel sebelumnya saya telah membahas juga tentang grid view di responsive web design. Di artikel itu dijelaskan tentang penggunaan % sebagai satuan untuk membuat sebuah layout.

Di artikel kali ini kita akan secara khusus membahas tentang display grid pada CSS3.

Apa itu grid layout?

Layout grid di css menawarkan konsep sistem layout dengan grid, dimana terdiri dari baris dan kolom.

Dengan grid ini kita tidak harus dipusingkan dengan pengaturan float dan positioning.

Kode Syntax

grid ini adalah value dari display. Ada dua jenis yaitu grid dan inline-grid.

.kotak1 {
 display:grid;
}
.kotak2 {
 display:inline-grid;
}

Jika grid maka panjang akan dimaksimalkan 100%, jika inline-grid panjangnya sesuai dengan konten.

Baris grid

Garis horisontal pada grid dinamakan rows atau baris.

Kolom grid

Garis vertikal pada grid dinamakan columns atau kolom.

Jarak grid

Antar baris dengan baris dan antar kolom dengan kolom ada jarak, jarak inilah yang dinamakan gaps grid.

Jarak baris dinamakan row gap, sedangkan jarak kolom adalah column gap.

Untuk mengatur itu ada tiga properti grid gaps yang bisa digunakan, yaitu:

• grid-column-gap
• grid-row-gap
• grid-gap

grid-column-gap digunakan untuk mengatur jarak antar kolom.

.grid-kotak {
  display: grid;
  grid-column-gap: 50px;
}

grid-row-gap digunakan untuk mengatur jarak antar baris

.grid-kotak {
  display: grid;
  grid-row-gap: 50px;
}

Sedangkan grid-gap digunakan untuk mengatur jarak antar baris dan kolom.

.grid-kotak {
  display: grid;
  grid-gap: 50px;
}

Garis grid

Garis diantara kolom dinamakan column lines.

Garis diantara baris dinamakan row lines.