Item Kotak CSS
1
2
3
4
5
Elemen Anak (Item)
Wadah kotak berisi item kotak .
Secara default, sebuah wadah memiliki satu item kisi untuk setiap kolom, di setiap baris, tetapi Anda dapat mengatur gaya item kisi sehingga item tersebut akan menjangkau beberapa kolom dan/atau baris.
Properti kolom-grid:
Properti grid-columnmenentukan pada kolom mana untuk menempatkan item.
Anda menentukan di mana item akan dimulai, dan di mana item akan berakhir.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Catatan: Properti grid-columnadalah properti singkatan untuk grid-column-startdan grid-column-endproperti.
Untuk menempatkan item, Anda dapat merujuk ke nomor baris , atau menggunakan kata kunci "span" untuk menentukan berapa banyak kolom item akan span.
Contoh
Buat "item1" dimulai pada kolom 1 dan diakhiri sebelum kolom 5:
.item1 {
grid-column: 1 / 5;
}
Contoh
Buat "item1" mulai pada kolom 1 dan rentang 3 kolom:
.item1 {
grid-column: 1 / span 3;
}
Contoh
Buat "item2" mulai pada kolom 2 dan rentang 3 kolom:
.item2 {
grid-column: 2 / span 3;
}
Properti baris-grid:
Properti grid-rowmendefinisikan di baris mana untuk menempatkan item.
Anda menentukan di mana item akan dimulai, dan di mana item akan berakhir.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Catatan: Properti grid-rowadalah properti singkatan untuk grid-row-startdan grid-row-endproperti.
Untuk menempatkan item, Anda dapat merujuk ke nomor baris , atau menggunakan kata kunci "span" untuk menentukan berapa banyak baris item yang akan terbentang:
Contoh
Buat "item1" dimulai pada baris-baris 1 dan diakhiri pada baris-baris 4:
.item1 {
grid-row: 1 / 4;
}
Contoh
Buat "item1" mulai dari baris 1 dan rentangkan 2 baris:
.item1 {
grid-row: 1 / span 2;
}
Properti area grid
Properti grid-areadapat digunakan sebagai properti singkatan untuk
grid-row-start, grid-column-start, grid-row-enddan grid-column-endproperti.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Contoh
Buat "item8" dimulai pada baris-baris 1 dan baris-kolom 2, dan diakhiri pada baris-baris 5 dan baris kolom 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Contoh
Buat "item8" mulai dari baris-baris 2 dan baris-kolom 1, dan rentangkan 2 baris dan 3 kolom:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Penamaan Item Grid
Properti grid-areaini juga dapat digunakan untuk menetapkan nama ke item kisi.
tajuk
Tidak bisa
Utama
Benar
catatan kaki
Item kisi bernama dapat dirujuk oleh grid-template-areasproperti wadah kisi.
Contoh
Item1 mendapatkan nama "myArea" dan mencakup semua lima kolom dalam tata letak kotak lima kolom:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Setiap baris didefinisikan oleh apostrof (' ')
Kolom di setiap baris didefinisikan di dalam apostrof, dipisahkan oleh spasi.
Catatan: Tanda titik mewakili item kisi tanpa nama.
Contoh
Biarkan "myArea" menjangkau dua kolom dalam tata letak kotak lima kolom (tanda titik mewakili item tanpa nama):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Untuk mendefinisikan dua baris, tentukan kolom dari baris kedua di dalam kumpulan apostrof lainnya:
Contoh
Buat "item1" menjangkau dua kolom dan dua baris:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Contoh
Beri nama semua item, dan buat templat halaman web siap pakai:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Urutan Barang
Tata Letak Kotak memungkinkan kita untuk memposisikan item di mana pun kita suka.
Item pertama dalam kode HTML tidak harus muncul sebagai item pertama dalam kisi.
1
2
3
4
5
6
Contoh
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Anda dapat mengatur ulang urutan untuk ukuran layar tertentu, dengan menggunakan kueri media:
Contoh
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}