<\/span><\/span><\/p>\n.grid-container {\r\n\t display: grid | inline-grid;\r\n}\r\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n <\/div><\/span><\/li>\n<\/ul>\n<\/li>\ngrid-template-column dan grid-template-rows: Mendefinisikan kolom dan baris dari sebuah grid dengan dipisahkan oleh jarak yang bernilai.Nilai merepresentasikan <\/span>track size<\/span><\/i>,dan garis diantaranya merepresentasikan garis grid.<\/span><\/span><\/li>\ngrid-template-areas: Mendefinisikan grid template berdasarkan referensi nama dari sebuah grid area yang spesifik dengan grid-area property.<\/span><\/span><\/li>\ngrid-template: Cara singkat untuk mengatur grid-template-rows,grid-template-columns,dan grid-template-areas dalam satu deklarasi<\/span>\n\n- Values:\u00a0<\/span>\n
\n- none: mengatur ketiga properti ke value awalnya.<\/span><\/li>\n
- grid-template-rows \/ grid-template-columns: mengatur grid-template-columns dan grid-template-rows ke nilai spesifik,masing-masing,dan mengatur grid-template-areas ke none.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\n- column-gap,row-gap,grid-column-gap,grid-row-gap: Ukuran spesifik sebuah garis grid.Bisa dianggap seperti mengatur lebar diantara kolom\/baris.<\/span><\/span><\/li>\n
- gap, grid-gap: Cara singkat untuk mengatur column-gap dan row-gap.Hanya saja langsung mengatur keduanya secara bersamaan.<\/span><\/span><\/li>\n
- justify-items: Mensejajarkan grid item secara horizontal,nilai ini akan diterapkan ke seluruh grid item yang berada di dalam grid-container.<\/span>\n
\n- Values:\u00a0<\/span>\n
\n- start: mensejajarkan item agar rata dengan ujung awal dari sel mereka secara horizontal<\/span><\/li>\n
- end: mensejajarkan item agar rata dengan ujung akhir dari sel mereka secara horizontal<\/span><\/li>\n
- center: mensejajarkan item ditengah sel mereka secara horizontal<\/span><\/li>\n
- stretch: mengisi penuh width sel mereka(ini adalah settingan default)<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\n- align-items: Mensejajarkan grid item secara vertikal,nilai ini akan diterapkan ke seluruh grid item yang berada di dalam grid-container.<\/span>\n
\n- Values:\u00a0<\/span>\n
\n- start: mensejajarkan item agar rata dengan ujung awal dari sel mereka secara vertikal<\/span><\/li>\n
- end: mensejajarkan item agar rata dengan ujung akhir dari sel mereka secara vertikal<\/span><\/li>\n
- center: mensejajarkan item ditengah sel mereka secara vertikal<\/span><\/li>\n
- stretch: mengisi penuh height sel mereka(ini adalah settingan default)<\/span><\/li>\n
- baseline: mensejajarkan item dengan garis dasar teks<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\n- place-items: Mengatur align-items dan justify-items property hanya dengan sekali deklarasi.Value yang dimiliki pun sama dengan align-items dan justify-items.
\n<\/span><\/li>\n- justify-content: Mensejajarkan seluruh grid secara horizontal.<\/span>\n
\n- Values:<\/span>\n
\n- start: mensejajarkan grid agar rata dengan ujung awal grid container<\/span><\/li>\n
- end: mensejajarkan grid agar rata dengan ujung akhir grid container<\/span><\/li>\n
- center: mensejajarkan grid di tengah grid container<\/span><\/li>\n
- stretch: meresize grid item agar grid bisa mengisi penuh width grid container<\/span><\/li>\n
- space-around: menempatkan jumlah ruang yang merata disetiap grid item,dengan ukuran setangan ruang kosong di ujung jauh<\/span><\/li>\n
- space-between: menempatkan jumlah ruang yang merata disetiap grid item,dengan tanpa adanya ruang kosong di ujung jauh<\/span><\/li>\n
- space-evenly: menempatkan jumlah ruang yang merata disetiap grid item,termasuk di ujung yang jauh<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\n- align-content: Mensejajarkan seluruh grid secara vertikal.<\/span>\n
\n- Values:<\/span>\n
\n- start: mensejajarkan grid agar rata dengan ujung awal grid container<\/span><\/li>\n
- end: mensejajarkan grid agar rata dengan ujung akhir grid container<\/span><\/li>\n
- center: mensejajarkan grid di tengah grid container<\/span><\/li>\n
- stretch: meresize grid item agar grid bisa mengisi penuh height grid container<\/span><\/li>\n
- space-around: menempatkan jumlah ruang yang merata disetiap grid item,dengan ukuran setangan ruang kosong di ujung jauh<\/span><\/li>\n
- space-between: menempatkan jumlah ruang yang merata disetiap grid item,dengan tanpa adanya ruang kosong di ujung jauh<\/span><\/li>\n
- space-evenly: menempatkan jumlah ruang yang merata disetiap grid item,termasuk di ujung yang jauh<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\n- place-content:Mengatur align-content dan justify-content properti dengan sekali deklarasi.Nilai pertamanya mengatur align-content,dan nilai kedua mengatur justify-content.Jika nilai kedua tidak ada(tidak diisi),maka nilai pertama akan digunakan untuk mengatur keduanya\u00a0<\/span><\/li>\n<\/ul>\n
\n- grid-auto-columns, grid-auto-rows: Menentukan ukuran <\/span>grid tracks(implick grid tracks)<\/span><\/i> yang dibuat secara otomatis.<\/span>Implicit tracks<\/span><\/i> dibuat ketika lebih banyak <\/span>grid items<\/span><\/i> daripada sel di dalam grid atau ketika <\/span>grid-item <\/span><\/i>ditempatkan diluar <\/span>explicit grid<\/span><\/i>.<\/span>\n
\n- Values:\u00a0<\/span>\n
\n- track-size: bisa berupa panjang,persentase,atau sebagian kecil dari ruang kosong di dalam grid(memakai unit fr).<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\n- grid-auto-flow: Properti ini mengontrol bagaimana algoritma <\/span>auto-placement <\/span><\/i>bekerja.<\/span>\n
\n- Values:<\/span>\n
\n- row: membuat algoritma <\/span>auto-placement<\/span><\/i> untuk mengisi setiap baris secara bergantian,dan menambahkan baris baru seperlunya(default).<\/span><\/li>\n
- column: membuat algoritma <\/span>auto-placement<\/span><\/i> untuk mengisi setiap kolom secara bergantian,dan menambahkan kolom baru seperlunya(default).\u00a0<\/span><\/li>\n
- dense: membuat algoritma <\/span>auto-placement<\/span><\/i> untuk mengisi lubang lebih awal di grid jika item yang lebih kecil muncul kemudian.Dense juga hanya mengubah <\/span>visual order<\/span><\/i> dari item yang ada,dan bisa membuat item-item tampak rusak.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\n- grid: Cara singkat untuk mengatur semua properti dalam satu deklarasi.Properti yang diatur ialah:grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns, dan grid-auto-flow(Catatan: Hanya bisa menentukan <\/span>explicit <\/span><\/i>atau <\/span>implicit<\/span><\/i> grid dalam sekali deklarasi).<\/span>\n
\n- Values:\u00a0<\/span>\n
\n- none: mengatur semua <\/span>sub-properties<\/span><\/i> ke nilai awal masing masing <\/span>sub-properties<\/span><\/i><\/li>\n
- grid-template: sama seperti cara singkat grid-template<\/span><\/li>\n