容器网格 CSS

1
2
3
4
5
6
7
8

亲自试一试

kontainer jaringan

Untuk membuat elemen HTML bertindak seperti kontainer jaringan, anda mesti menempatkan display Atur kepada grid atau inline-grid.

Kontainer jaringan terdiri daripada objek jaringan yang ditempatkan di dalam kolom dan baris.

sifat grid-template-columns

grid-template-columns Sifat ini menentukan bilangan kolom di susun atur jaringan, dan dapat menentukan lebar setiap kolom.

Nilainya adalah daftar yang dipisahkan ruang, di mana setiap nilai menentukan panjang kolom yang relevan.

Jika anda mahu susun atur jaringan mengandungi empat kolom, tentukan lebar empat kolom ini; jika semua kolom seharusnya mempunyai lebar yang sama, atur kepada "auto".

实例

Buat jaringan yang mengandungi empat kolom:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

亲自试一试

注意：Jika terdapat lebih daripada 4 item di 4 grid kolom, jaringan akan menambah baris baru secara automatik dan memasukkan item-item ini ke dalamnya.

grid-template-columns Sifat ini juga dapat digunakan untuk tentukan saiz kolom (lebar).

实例

Atur saiz 4 kolom ini:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

亲自试一试

sifat grid-template-rows

grid-template-rows Sifat ini menentukan ketinggian setiap kolom.

1
2
3
4
5
6
7
8

Nilainya adalah daftar yang dipisahkan ruang, di mana setiap nilai menentukan ketinggian baris yang relevan:

实例

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

亲自试一试

sifat justify-content

justify-content Sifat ini digunakan untuk menyelaraskan keseluruhan jaringan di dalam container.

1
2
3
4
5
6
7
8

注意：Lebar jaringan mesti lebih kecil daripada lebar container, supaya sifat justify-content dapat berfungsi.

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试

sifat align-content

align-content 属性用于垂直对齐容器内的整个网格。

1
2
3
4
5
6
7
8

注意：总高度网格必须小于容器的高度，这样属性 align-content 才能生效。

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试

实例

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

亲自试一试