Grid CSS
Ketahui cara mendayakan, menggunakan dan menyesuaikan sistem reka letak ganti kami yang dibina pada Grid CSS dengan contoh dan coretan kod.
Sistem grid lalai Bootstrap mewakili kemuncak bagi lebih sedekad teknik susun atur CSS, dicuba dan diuji oleh berjuta-juta orang. Tetapi, ia juga dicipta tanpa banyak ciri dan teknik CSS moden yang kita lihat dalam penyemak imbas seperti Grid CSS baharu.
Bagaimana ia berfungsi
Dengan Bootstrap 5, kami telah menambah pilihan untuk mendayakan sistem grid berasingan yang dibina pada Grid CSS, tetapi dengan twist Bootstrap. Anda masih mendapat kelas yang boleh anda gunakan secara sesuka hati untuk membina reka letak responsif, tetapi dengan pendekatan yang berbeza di bawah hud.
-
Grid CSS adalah ikut serta. Lumpuhkan sistem grid lalai dengan menetapkan
$enable-grid-classes: false
dan dayakan Grid CSS dengan menetapkan$enable-cssgrid: true
. Kemudian, susun semula Sass anda. -
Gantikan contoh
.row
dengan.grid
. Kelas.grid
menetapkandisplay: grid
dan menciptagrid-template
yang anda bina dengan HTML anda. -
Gantikan
.col-*
kelas dengan.g-col-*
kelas. Ini kerana lajur Grid CSS kami menggunakan sifatgrid-column
dan bukannyawidth
. -
Lajur dan saiz longkang ditetapkan melalui pembolehubah CSS. Tetapkan ini pada induk
.grid
dan sesuaikan mengikut cara yang anda mahu, sebaris atau dalam lembaran gaya, dengan--bs-columns
dan--bs-gap
.
Pada masa hadapan, Bootstrap mungkin akan beralih kepada penyelesaian hibrid kerana gap
harta itu telah mencapai sokongan penyemak imbas hampir penuh untuk flexbox.
Perbezaan utama
Berbanding dengan sistem grid lalai:
-
Utiliti fleksibel tidak menjejaskan lajur Grid CSS dengan cara yang sama.
-
Jurang menggantikan longkang. Harta
gap
ini menggantikan mendatarpadding
daripada sistem grid lalai kami dan berfungsi lebih sepertimargin
. -
Oleh itu, tidak seperti
.row
s,.grid
s tidak mempunyai margin negatif dan utiliti margin tidak boleh digunakan untuk menukar talang grid. Jurang grid digunakan secara mendatar dan menegak secara lalai. Lihat bahagian menyesuaikan untuk butiran lanjut. -
Gaya sebaris dan tersuai harus dilihat sebagai pengganti untuk kelas pengubah suai (cth,
style="--bs-columns: 3;"
lwnclass="row-cols-3"
). -
Bersarang berfungsi sama, tetapi mungkin memerlukan anda menetapkan semula kiraan lajur anda pada setiap kejadian
.grid
. Lihat bahagian bersarang untuk butiran.
Contoh
Tiga lajur
Tiga lajur yang sama lebar merentas semua ruang pandang dan peranti boleh dibuat dengan menggunakan .g-col-4
kelas. Tambah kelas responsif untuk menukar reka letak mengikut saiz port pandangan.
<div class="grid">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
Responsif
Gunakan kelas responsif untuk melaraskan reka letak anda merentas viewport. Di sini kita mulakan dengan dua lajur pada port pandangan yang paling sempit, dan kemudian berkembang kepada tiga lajur pada port pandangan sederhana dan ke atas.
<div class="grid">
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>
Bandingkan dengan reka letak dua lajur ini di semua ruang pandang.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Membungkus
Item grid secara automatik membalut ke baris seterusnya apabila tiada lagi ruang secara mendatar. Ambil perhatian bahawa gap
berlaku untuk jurang mendatar dan menegak antara item grid.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Bermula
Mulakan kelas bertujuan untuk menggantikan kelas mengimbangi grid lalai kami, tetapi mereka tidak sepenuhnya sama. Grid CSS mencipta templat grid melalui gaya yang memberitahu pelayar untuk "bermula pada lajur ini" dan "berakhir pada lajur ini." Harta tersebut adalah grid-column-start
dan grid-column-end
. Kelas permulaan adalah singkatan untuk yang pertama. Pasangkan mereka dengan kelas lajur untuk saiz dan selaraskan lajur anda mengikut keperluan anda. Mulakan kelas bermula pada nilai 1
yang 0
tidak sah untuk sifat ini.
<div class="grid">
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
Lajur automatik
Apabila tiada kelas pada item grid (anak terdekat a .grid
), setiap item grid secara automatik akan bersaiz kepada satu lajur.
<div class="grid">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Tingkah laku ini boleh dicampur dengan kelas lajur grid.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Bersarang
Sama seperti sistem grid lalai kami, Grid CSS kami membolehkan sarang mudah .grid
s. Walau bagaimanapun, tidak seperti lalai, grid ini mewarisi perubahan dalam baris, lajur dan jurang. Pertimbangkan contoh di bawah:
- Kami mengatasi bilangan lalai lajur dengan pembolehubah CSS setempat:
--bs-columns: 3
. - Dalam lajur auto pertama, kiraan lajur diwarisi dan setiap lajur ialah satu pertiga daripada lebar yang tersedia.
- Dalam lajur auto kedua, kami telah menetapkan semula kiraan lajur pada lajur bersarang
.grid
kepada 12 (lalai kami). - Autolajur ketiga tidak mempunyai kandungan bersarang.
Dalam amalan ini membolehkan susun atur yang lebih kompleks dan tersuai jika dibandingkan dengan sistem grid lalai kami.
<div class="grid" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
Menyesuaikan
Sesuaikan bilangan lajur, bilangan baris dan lebar jurang dengan pembolehubah CSS setempat.
Pembolehubah | Nilai sandaran | Penerangan |
---|---|---|
--bs-rows |
1 |
Bilangan baris dalam templat grid anda |
--bs-columns |
12 |
Bilangan lajur dalam templat grid anda |
--bs-gap |
1.5rem |
Saiz jurang antara lajur (menegak dan mendatar) |
Pembolehubah CSS ini tidak mempunyai nilai lalai; sebaliknya, mereka menggunakan nilai sandaran yang digunakan sehingga tika setempat disediakan. Sebagai contoh, kami menggunakan var(--bs-rows, 1)
untuk baris Grid CSS kami, yang mengabaikan --bs-rows
kerana itu belum ditetapkan di mana-mana lagi. Setelah itu, .grid
contoh akan menggunakan nilai itu dan bukannya nilai sandaran 1
.
Tiada kelas grid
Elemen kanak-kanak segera .grid
ialah item grid, jadi ia akan bersaiz tanpa menambah .g-col
kelas secara eksplisit.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Lajur dan jurang
Laraskan bilangan lajur dan jurang.
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
<div class="g-col-2">.g-col-2</div>
<div class="g-col-2">.g-col-2</div>
</div>
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-4">.g-col-4</div>
</div>
Menambah baris
Menambah lebih banyak baris dan menukar peletakan lajur:
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
<div>Auto-column</div>
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
<div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>
Jurang
Tukar jurang menegak hanya dengan mengubah suai row-gap
. Ambil perhatian bahawa kami menggunakan gap
pada .grid
s, tetapi row-gap
dan column-gap
boleh diubah suai mengikut keperluan.
<div class="grid" style="row-gap: 0;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Kerana itu, anda boleh mempunyai s menegak dan mendatar yang berbeza gap
, yang boleh mengambil satu nilai (semua sisi) atau sepasang nilai (menegak dan mendatar). Ini boleh digunakan dengan gaya sebaris untuk gap
, atau dengan --bs-gap
pembolehubah CSS kami.
<div class="grid" style="--bs-gap: .25rem 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Sass
Satu had Grid CSS ialah kelas lalai kami masih dijana oleh dua pembolehubah Sass $grid-columns
dan $grid-gutter-width
. Ini secara berkesan menentukan bilangan kelas yang dijana dalam CSS terkumpul kami. Anda mempunyai dua pilihan di sini:
- Ubah suai pembolehubah Sass lalai tersebut dan susun semula CSS anda.
- Gunakan gaya sebaris atau tersuai untuk menambah kelas yang disediakan.
Contohnya, anda boleh meningkatkan kiraan lajur dan menukar saiz jurang, dan kemudian saiz "lajur" anda dengan gabungan gaya sebaris dan kelas lajur Grid CSS yang dipratakrifkan (cth, .g-col-4
).
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
<div style="grid-column: span 14;">14 columns</div>
<div class="g-col-4">.g-col-4</div>
</div>