Scribd
Unggah
51 tayangan

CSS Grid

Dokumen ini membahas tentang CSS Grid, yaitu modul baru CSS untuk mendefinisikan sistem layout berbentuk grid dalam 2 dimensi. Dokumen ini menjelaskan istilah, properti, dan fungsi khusus yang terkait dengan CSS Grid.

Diunggah oleh

Muhammad Raihan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
51 tayangan

CSS Grid

Dokumen ini membahas tentang CSS Grid, yaitu modul baru CSS untuk mendefinisikan sistem layout berbentuk grid dalam 2 dimensi. Dokumen ini menjelaskan istilah, properti, dan fungsi khusus yang terkait dengan CSS Grid.

Diunggah oleh

Muhammad Raihan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

CSS Grid

A. Pengertian CSS Grid


CSS Grid adalah modul CSS baru untuk mendefinisikan sistem layout berbentuk grid dalam
2 dimensi (Baris & Kolom).

B. Terminologi / Istilah dalam CSS Grid


1) Grid container
Element pembungkus grid, didefinisikan dengan menuliskan : display : grid;

2) Grid item
Element-element yang berada (1 level) di dalam grid container

3) Grid line
Garis horizontal (kolom) atau vertikal (baris) yang memisahkan grid
menjadi beberapa bagian dan ditandai dengan angka
4) Grid cell
Perpotongan / pertemuan antara baris dan kolom di dalam grid
5) Grid area
Kumpulan lebih dari satu grid cell yang membentuk kotak
6) Grid track
Ukuran / jarak antara 2 grid line, bisa horizontal (kolom) atau vertikal
(garis)
7) Grid gap
Jarak antara grid track / cell
C. Properti Grid
Properti yang sering digunakan adalah sbagai berikut :

1) Grid-template columns dan rows, mendefinisikan kolom / baris dengan cara


menuliskan nilai dipisahkan oleh spasi. Nilai mempresentasikan ukuran grid track

dan spasi merepresentasikan grid line (explicit track)


 <track-size> : bisa berupa px, %, auto, atau fr (fraction)
 <line-name> : nama yang bisa diberikan pada track
2) Grid-auto columns & rows, mengatur ukuran grid track yang tidak terlihat dituliskan
pada grid-template (implicit track)
3) Grid-auto-flow, mengatur penempatan item / cell pada grid track termasuk yang
ditulis secara implicit

4) Grid-template-area, mendefinisikan grid template menggunakan nama dari area yang


ditulis pada property grid -area pada item

5) Grid-template, mendefinisikan grid-template rows, columns dan area dalam satu


deklarasi

6) Grip gap, mendefinisikan ukuran grid-line / jarak antara baris atau kolom
Shorthand column-gap & row-gap :

7) Grid, ialah shorthand untuk mendeklarasikan properti grid-template-rows, columns,


areas, grid-auto-rows,column dan grid-auto-flow
8) Justify-tems, mensejajarkan grid-items pada sumbu horizontal

9) Align-items, mensejajarkan grid-items pada sumbu vertikal

10) Place-items, shorthand untuk menulis justify-items dan align-items dalam satu
deklarasi
11) Justify-content, mengatur posisi seluruh grid container pada sumbu horizontal. Ini
bisa dilakukan ketika ukuran grid lebih kecil dari ukuran containernya, biasanya ketika
grid itemsnya menggunakan ukuran yang fixed (px)
12) Align-content, sama seperti justify-content, tapi untuk sumbu vertikal

13) Place-content, bentuk shorthand untuk menulis justify-content dan align-content


dalam satu deklarasi

14) Grid-column-start,end & grid-row-start,end. Menentukan tempat dari grid item


dengan mengacu pada nomor atau nama grid line yang spesifik

 <nomor> | <nama> : mengacu pada nomor atau nama yang kita beri pada grid
line
 Span <nomor> : item akan memanjang / melebar sampai sejumlah nomor
 Span <nama> : item akan memanjang / melebar sampai ke nama grid line
tertentu

15) Grid-column & grid-row, shorthand untuk start dan end pada grid-column & grid-
row
16) Grid-area, menentukan nama area pada item sesuai dengan template yang sudah
dibuat sebelumnya melalui properti grid-template-areas. Bisa digunakan sbgaai
shorthand untuk grid-column-start,end dan grid-row-start,end

17) Justify-self, mengatur posisi item pada sebuah cell terhadap sumbu horizontal

18) align-self, mengatur posisi item pada sebuah cell terhadap sumbu vertikal

19) Place-self, shorthand posisi item pada sebuah cell terhadap sumbu vertikal dan
horizontal dalam satu deklarasi

D. Special Function & Keywords


1) Repeat()
Menentukan ukuran grid-track secara berulang

2) Min-content & Max-content


Menentukan seberap abesra ukuran grid-track berdasarkan content pada sebuah
item

3) Minmax()

4) Auto-fill & auto-fit


Menentukan jumlah item untuk berada pada grid-track

Anda mungkin juga menyukai