Apa itu Properti Grid?

Properti grid adalah properti singkatan untuk grid-template-rows, grid-template-kolom, grid-template-area, grid-auto-rows, grid-auto-kolom, grid-auto-flow, grid-kolom-gap , dan properti grid-gap baris.

Struktur jaringan

Properti grid membuat elemen untuk ditampilkan seperti matriks ⊞

 
 
 
 
 
 
 
 

Dalam css

#container {
 tampilan: kotak;
 }

Dalam misalnya, #container ditampilkan sebagai kisi dan elemen turunannya akan ditampilkan sebagai sel atau item kisi

Kompatibilitas browser

Sangat mengasyikkan, bahwa IE, Edge, Firefox mendukung properti grid CSS . Sebagian besar semua browser memiliki tampilan grid UI yang indah di alat pengembang.

Garis Grid

Garis kisi adalah garis horizontal dan vertikal, yang digunakan untuk penentuan posisi. Indeks posisi dapat berupa bilangan bulat (bilangan negatif dan positif).

Properti → grid-kolom-mulai, akhir-grid-kolom, akhir-baris-grid, akhir-baris-grid.

Kode sampel :

#grid> div: nth-child (2) {
 grid-kolom-mulai: 2;
 kisi-kolom-ujung: 3;
 grid-row-start: 2;
 grid-row-end: 3;
}

Elemen 2 akan dimulai pada garis vertikal kedua dalam 2 garis horizontal dan elemen akan berakhir pada 3 garis vertikal dan 3 garis vertikal.

Garis Kisi

Sel jaringan

Sel jaringan adalah ruang antara dua garis kotak vertikal yang berdekatan dan dua garis kotak horizontal yang berdekatan.

Sel jaringan

Jejak Kisi

Jejak grid adalah ruang antara dua garis grid yang berdekatan. yaitu baris, kolom.

Jejak Kisi

Grid Area & Grid Gap

Area kisi adalah grup dari satu atau lebih sel.

Grid Gap adalah ruang antara baris dan kolom. Ini adalah properti singkatan dari grid-row-gap dan grid-kolom-gap.

Kisi Baris & Kisi kolom

grid-row adalah properti singkatan untuk grid-row-start dan grid-row-end.

kisi-kolom adalah properti singkatan untuk kisi-kisi-awal dan akhir-kisi-kisi

Baris kisi

grid-row-start → menentukan posisi awal item grid di baris

eg.grid-row-start: 2 → Elemen akan dimulai pada garis vertikal kedua

kisi-baris-akhir → menentukan posisi akhir item kisi di baris

eg.grid-row-end: 3 → Elemen akan berakhir di garis vertikal kedua

Grid-auto-flow

Ini Mengontrol cara kerja algoritma penempatan otomatis. Secara default, nilainya adalah baris (Item ditempatkan dalam basis baris)

grid-auto-flow: baris;
grid-auto-flow: kolom;
Kolom aliran otomatis kotak & baris aliran otomatis jaringan

grid-auto-flow: baris padat → Menggunakan algoritma pengemasan “padat”. Isi ruang kosong di grid berdasarkan baris.

grid-auto-flow: kolom padat → Menggunakan algoritma pengemasan “padat”. Isi ruang kosong di dalam grid berdasarkan kolom

Grid Eksplisit dan Grid Implisit

Kisi eksplisit adalah kisi yang dibuat oleh pengguna menggunakan kisi-kisi-templat, kisi-kisi-templat

grid-templat-kolom: repeat (3, 100px);
grid-template-rows: 100px 100px;

Grid implisit dibuat oleh browser. Ukuran grid implisit dapat dimodifikasi menggunakan properti grid-auto-kolom dan grid-auto-rows.

grid-templat-kolom: repeat (3, 100px);
grid-auto-rows: 100px;

Pesanan kotak:

Kita dapat memesan elemen dengan properti area templat.

kita dapat mengubah area templat dalam kueri media dan menampilkan struktur kisi baru.

periksa codepen untuk lebih.

Untuk kisi, kebanyakan kita semua menggunakan sistem kisi bootstrap. Bootstrap dapat mengubah beberapa nama kelas di setiap versi (But Not Like Angular ), Jadi kita perlu mengingat versi mana yang memiliki nama kelas .

Dengan menggunakan properti kotak CSS, Kita BISA (bahkan di IE ) dengan mudah menampilkan elemen dalam tampilan kotak.

Terima kasih banyak sudah membaca! Jika Anda menyukainya, tolong dukung dengan bertepuk tangan dan berbagi kiriman. Jangan ragu untuk meninggalkan komentar di bawah ini.