Grid CSS

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: falsedan dayakan Grid CSS dengan menetapkan $enable-cssgrid: true. Kemudian, susun semula Sass anda.

• Gantikan contoh .rowdengan .grid. Kelas .gridmenetapkan display: griddan mencipta grid-templateyang anda bina dengan HTML anda.

• Gantikan .col-*kelas dengan .g-col-*kelas. Ini kerana lajur Grid CSS kami menggunakan sifat grid-columndan bukannya width.

• Lajur dan saiz longkang ditetapkan melalui pembolehubah CSS. Tetapkan ini pada induk .griddan sesuaikan mengikut cara yang anda mahu, sebaris atau dalam lembaran gaya, dengan --bs-columnsdan --bs-gap.

Pada masa hadapan, Bootstrap mungkin akan beralih kepada penyelesaian hibrid kerana gapharta 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 gapini menggantikan mendatar paddingdaripada sistem grid lalai kami dan berfungsi lebih seperti margin.

• Oleh itu, tidak seperti .rows, .grids 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 hendaklah dilihat sebagai pengganti untuk kelas pengubah suai (cth, style="--bs-columns: 3;"lwn class="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-4kelas. Tambah kelas responsif untuk menukar reka letak mengikut saiz port pandangan.

<div class="grid text-center">
  <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 text-center">
  <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 text-center">
  <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 gapberlaku untuk jurang mendatar dan menegak antara item grid.

<div class="grid text-center">
  <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 sama sepenuhnya. 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-startdan grid-column-end. Kelas permulaan adalah singkatan untuk yang pertama. Pasangkan mereka dengan kelas lajur untuk saiz dan selaraskan lajur anda mengikut apa yang anda perlukan. Mulakan kelas bermula pada nilai 1yang 0tidak sah untuk sifat ini.

<div class="grid text-center">
  <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 text-center">
  <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 text-center">
  <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 .grids. 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 .gridkepada 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 text-center" 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 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-rowskerana itu belum ditetapkan di mana-mana lagi. Setelah itu, .gridcontoh akan menggunakan nilai itu dan bukannya nilai sandaran 1.

Tiada kelas grid

Elemen kanak-kanak segera .gridialah item grid, jadi ia akan bersaiz tanpa menambah .g-colkelas secara eksplisit.

<div class="grid text-center" 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 text-center" 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 text-center" 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 text-center" 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 gappada .grids, tetapi row-gapdan column-gapboleh diubah suai mengikut keperluan.

<div class="grid text-center" 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>

Oleh sebab 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-gappembolehubah CSS kami.

<div class="grid text-center" 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-columnsdan $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 text-center" 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>