Asas CSS Grid

15 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Cipta grid dengan display: grid dan grid-template-columns
Bahagikan ruang dengan adil menggunakan unit fr dan repeat()
Jarakkan baris dan lajur dengan gap
Jadikan sesuatu item merentas beberapa lajur dengan grid-column

Idea utama

Flexbox menyusun elemen dalam satu arah. Grid menyusun elemen dalam baris dan lajur serentak — sesuai untuk galeri, senarai kad dan susun atur halaman.

Bayangkan grid seperti garisan dalam buku latihan. Anda lukis lajur pada induk, dan anak-anaknya masuk ke dalam petak satu demi satu, kiri ke kanan, kemudian ke baris seterusnya.

CSS

.cards {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* three columns */
  gap: 16px;                                /* space between cells */
}

Anda tak pernah sebut berapa baris. Grid cipta seberapa banyak yang perlu: enam kad dalam tiga lajur menjadi dua baris secara automatik.

Lajur CSS Grid

0 lajur → 1 garisan grid

/* CSS */

.grid {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 12px;

}

fr = satu bahagian daripada ruang yang tinggal. px = saiz tetap.

grid-template-columns

gap12px.item-1 { grid-column: span 2 }

Saiz trek di atas grid diukur terus daripada pelayar anda. Dipermudahkan: hanya lajur ditunjukkan; baris dicipta secara automatik.

Tukar lajur dan gap, dan lihat item mengalir ke dalam petak.

Unit fr: bahagian yang adil

Lajur piksel tetap tak muat semua skrin. Unit fr bermaksud pecahan daripada ruang kosong. 1fr 1fr 1fr memberi tiga lajur sama lebar yang memanjang mengikut halaman. 2fr 1fr menjadikan lajur pertama dua kali lebih lebar daripada yang kedua.

Ulang-ulang

CSS

grid-template-columns: 1fr 1fr 1fr 1fr;

Sama, dengan repeat()

CSS

grid-template-columns: repeat(4, 1fr);

repeat(bilangan, saiz) cuma jalan pintas. Kedua-dua baris membina empat lajur sama lebar.

Meletakkan item

Secara default, setiap item mengambil satu petak. Untuk membesarkan sesuatu item, beritahu berapa lajur yang perlu ia rentasi (span):

CSS

.featured {
  grid-column: span 2;   /* take up two columns */
}

.banner {
  grid-column: 1 / -1;   /* from the first line to the last: full width */
}

Garisan, bukan petak

Grid menomborkan garisan di antara lajur, bermula dari 1. Tiga lajur ada empat garisan, jadi 1 / 4 dan 1 / -1 kedua-duanya bermaksud "dari paling kiri ke paling kanan". -1 sentiasa bermaksud garisan terakhir.

Grid atau flexbox?

Guna flexbox untuk satu baris atau satu lajur elemen (bar navigasi, deretan butang). Guna grid bila anda mahu baris dan lajur sejajar (galeri, dashboard, seluruh halaman). Laman web sebenar guna kedua-duanya, selalunya bersarang.

Kad-kad kuih bertindan dalam satu lajur panjang. Jadikan .cards sebagai grid dengan tiga lajur sama lebar yang memanjang mengikut halaman — guna unit fr (dengan atau tanpa repeat()).

Semakan

.cards ialah grid container
Grid ada tiga lajur sama lebar
Kad duduk bersebelahan dan turun ke baris baharu

Uji kefahaman

Sebuah grid selebar 300px tanpa gap dan grid-template-columns: 1fr 2fr. Berapa lebar lajur-lajurnya?

1px dan 2px100px dan 200px150px dan 150px

Yang mana sama dengan repeat(4, 1fr)?

4fr1fr 1fr 1fr 1fr1fr 4

Apa yang grid-column: 1 / -1 lakukan pada sesuatu item?

MenyembunyikannyaMemindahkannya ke lajur terakhir sahajaMemanjangkannya dari garisan grid pertama hingga terakhir — lebar penuh

Apa yang anda pelajari

display: grid + grid-template-columns pada induk mencipta lajur; baris dibuat secara automatik.
fr membahagikan ruang kosong; repeat(3, 1fr) memberi tiga lajur sama lebar.
gap menjarakkan baris dan lajur tanpa sebarang margin.
grid-column: span 2 menjadikan item meliputi dua lajur; 1 / -1 menjadikannya lebar penuh.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.