Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Wadah Kotak CSS


1

2

3

4

5

6

7

8


Wadah Kotak

Untuk membuat elemen HTML berperilaku sebagai wadah kisi, Anda harus menyetel displayproperti ke gridatau inline-grid.

Wadah kotak terdiri dari item kotak, ditempatkan di dalam kolom dan baris.


Properti kolom-templat-grid

Properti grid-template-columnsmenentukan 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-columnsjuga 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-rowsmendefinisikan 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-contentini 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-contentproperti 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-contentini 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-contentproperti 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;
}