Kontainer Susun Tumpukan CSS
- Hal Sebelumnya Modul Susun Tumpukan CSS
- Hal Berikutnya Item Susun Tumpukan CSS
kontainer jaringan
Untuk membuat elemen HTML berfungsi sebagai kontainer jaringan, Anda harus mengatur display
aturan ini diatur ke grid atau inline-grid.
Kontainer jaringan terdiri dari item jaringan yang ditempatkan di dalam kolom dan baris.
aturan grid-template-columns
grid-template-columns
Atribut mendefinisikan jumlah kolom dalam tata letak jaringan dan dapat mendefinisikan lebar setiap kolom.
Nilainya adalah daftar yang dipisahkan spasi, di mana setiap nilai mendefinisikan panjang kolom yang masing-masing.
Jika Anda ingin tata letak jaringan mengandung 4 kolom, tentukan lebar 4 kolom ini; jika semua kolom seharusnya memiliki lebar yang sama, atur ke "auto".
Contoh
Buat jaringan yang mengandung 4 kolom:
.grid-container { display: grid; grid-template-columns: auto auto auto auto; }
Perhatian:Jika ada lebih dari 4 item di 4 kolom jaringan, jaringan akan menambahkan baris baru secara otomatis dan memasukkan item-item ini ke dalamnya.
grid-template-columns
Atribut ini juga dapat digunakan untuk menentukan ukuran kolom (lebar).
Contoh
Atur ukuran 4 kolom ini:
.grid-container { display: grid; grid-template-columns: 80px 200px auto 40px; }
aturan grid-template-rows
grid-template-rows
Atribut mendefinisikan tinggi setiap kolom.
Nilainya adalah daftar yang dipisahkan spasi, di mana setiap nilai mendefinisikan tinggi baris yang masing-masing:
Contoh
.grid-container { display: grid; grid-template-rows: 80px 200px; }
aturan justify-content
justify-content
Atribut digunakan untuk mengatur posisi seluruh jaringan di dalam kontainer.
Perhatian:Lebar total jaringan harus lebih kecil daripada lebar kontainer, sehingga atribut justify-content dapat beroperasi.
Contoh
.grid-container { display: grid; justify-content: space-evenly; }
Contoh
.grid-container { display: grid; justify-content: space-around; }
Contoh
.grid-container { display: grid; justify-content: space-between; }
Contoh
.grid-container { display: grid; justify-content: center; }
Contoh
.grid-container { display: grid; justify-content: start; }
Contoh
.grid-container { display: grid; justify-content: end; }
aturan align-content
align-content
Properti ini digunakan untuk mengatur penarikan seluruh jaringan di dalam kontainer secara vertikal.
Perhatian:Ketinggian total jaringan harus lebih kecil dari ketinggian kontainer, sehingga properti align-content dapat berlaku.
Contoh
.grid-container { display: grid; height: 400px; align-content: center; }
Contoh
.grid-container { display: grid; height: 400px; align-content: space-evenly; }
Contoh
.grid-container { display: grid; height: 400px; align-content: space-around; }
Contoh
.grid-container { display: grid; height: 400px; align-content: space-between; }
Contoh
.grid-container { display: grid; height: 400px; align-content: start; }
Contoh
.grid-container { display: grid; height: 400px; align-content: end; }
- Hal Sebelumnya Modul Susun Tumpukan CSS
- Hal Berikutnya Item Susun Tumpukan CSS