Kontainer Susun Tumpukan CSS

1
2
3
4
5
6
7
8

Coba Sendiri

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;
}

Coba Sendiri

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;
}

Coba Sendiri

aturan grid-template-rows

grid-template-rows Atribut mendefinisikan tinggi setiap kolom.

1
2
3
4
5
6
7
8

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;
}

Coba Sendiri

aturan justify-content

justify-content Atribut digunakan untuk mengatur posisi seluruh jaringan di dalam kontainer.

1
2
3
4
5
6
7
8

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;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  justify-content: space-around;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  justify-content: space-between;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  justify-content: center;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  justify-content: start;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  justify-content: end;
}

Coba Sendiri

aturan align-content

align-content Properti ini digunakan untuk mengatur penarikan seluruh jaringan di dalam kontainer secara vertikal.

1
2
3
4
5
6
7
8

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;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Coba Sendiri

Contoh

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Coba Sendiri