Wadah Kotak CSS
1
2
3
4
5
6
7
8
Wadah Kotak
Untuk membuat elemen HTML berperilaku sebagai wadah kisi, Anda harus menyetel display
properti ke
grid
atau inline-grid
.
Wadah kotak terdiri dari item kotak, ditempatkan di dalam kolom dan baris.
Properti kolom-templat-grid
Properti grid-template-columns
menentukan jumlah kolom dalam tata letak kisi Anda, dan dapat menentukan lebar setiap kolom.
Nilainya adalah daftar yang dipisahkan spasi, di mana setiap nilai menentukan lebar kolom masing-masing.
Jika Anda ingin tata letak kisi Anda berisi 4 kolom, tentukan lebar 4 kolom, atau "otomatis" jika semua kolom harus memiliki lebar yang sama.
Contoh
Buat grid dengan 4 kolom:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Catatan: Jika Anda memiliki lebih dari 4 item dalam kisi 4 kolom, kisi akan secara otomatis menambahkan baris baru untuk memasukkan item.
Properti grid-template-columns
juga dapat digunakan untuk menentukan ukuran (lebar) kolom.
Contoh
Tetapkan ukuran untuk 4 kolom:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Properti baris-templat-grid
Properti grid-template-rows
mendefinisikan ketinggian setiap baris.
1
2
3
4
5
6
7
8
Nilainya adalah daftar yang dipisahkan spasi, di mana setiap nilai menentukan tinggi baris masing-masing:
Contoh
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Properti konten justify
Properti justify-content
ini digunakan untuk menyelaraskan seluruh kisi di dalam wadah.
1
2
3
4
5
6
Catatan: Lebar total kisi harus kurang dari lebar wadah agar justify-content
properti memiliki efek apa pun.
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;
}
Properti align-konten
Properti align-content
ini digunakan untuk menyelaraskan seluruh grid di dalam wadah
secara vertikal .
1
2
3
4
5
6
Catatan: Tinggi total kisi harus kurang dari tinggi wadah agar align-content
properti memiliki efek apa pun.
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;
}