Kotak CSS

Sistem grid default Bootstrap merupakan puncak dari lebih dari satu dekade teknik tata letak CSS, dicoba dan diuji oleh jutaan orang. Tapi, itu juga dibuat tanpa banyak fitur dan teknik CSS modern yang kita lihat di browser seperti CSS Grid baru.

Bagaimana itu bekerja

Dengan Bootstrap 5, kami telah menambahkan opsi untuk mengaktifkan sistem grid terpisah yang dibangun di atas CSS Grid, tetapi dengan sentuhan Bootstrap. Anda masih mendapatkan kelas yang dapat Anda terapkan untuk membangun tata letak yang responsif, tetapi dengan pendekatan yang berbeda di bawah tenda.

• CSS Grid adalah keikutsertaan. Nonaktifkan sistem grid default dengan menyetel $enable-grid-classes: falsedan aktifkan CSS Grid dengan menyetel $enable-cssgrid: true. Kemudian, kompilasi ulang Sass Anda.

• Ganti instance .rowdengan .grid. Kelas .gridmenetapkan display: griddan membuat grid-templateyang Anda bangun dengan HTML Anda.

• Ganti .col-*kelas dengan .g-col-*kelas. Ini karena kolom Grid CSS kami menggunakan grid-columnproperti alih-alih width.

• Ukuran kolom dan talang diatur melalui variabel CSS. Setel ini pada induk .griddan sesuaikan sesuka Anda, sebaris atau dalam lembar gaya, dengan --bs-columnsdan --bs-gap.

Di masa depan, Bootstrap kemungkinan akan beralih ke solusi hybrid karena gapproperti tersebut telah mencapai dukungan browser yang hampir penuh untuk flexbox.

Perbedaan utama

Dibandingkan dengan sistem grid default:

• Utilitas Flex tidak mempengaruhi kolom CSS Grid dengan cara yang sama.

• Celah menggantikan talang. Properti gapmenggantikan horizontal paddingdari sistem grid default kami dan berfungsi lebih seperti margin.

• Dengan demikian, tidak seperti .rows, .grids tidak memiliki margin negatif dan utilitas margin tidak dapat digunakan untuk mengubah talang grid. Kesenjangan grid diterapkan secara horizontal dan vertikal secara default. Lihat bagian menyesuaikan untuk lebih jelasnya.

• Gaya sebaris dan kustom harus dilihat sebagai pengganti kelas pengubah (mis., style="--bs-columns: 3;"vs class="row-cols-3").

• Bersarang bekerja dengan cara yang sama, tetapi mungkin mengharuskan Anda untuk menyetel ulang jumlah kolom pada setiap instance dari file .grid. Lihat bagian bersarang untuk detailnya.

Contoh

Tiga kolom

Tiga kolom dengan lebar yang sama di semua viewports dan perangkat dapat dibuat dengan menggunakan .g-col-4kelas. Tambahkan kelas responsif untuk mengubah tata letak menurut ukuran area pandang.

<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 menyesuaikan tata letak Anda di seluruh area pandang. Di sini kita mulai dengan dua kolom pada viewports tersempit, dan kemudian berkembang menjadi tiga kolom pada viewports menengah 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 tata letak dua kolom ini di semua viewports.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Pembungkus

Item kisi secara otomatis membungkus ke baris berikutnya ketika tidak ada lagi ruang secara horizontal. Perhatikan bahwa gapberlaku untuk kesenjangan horizontal dan vertikal 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>

mulai

Kelas awal bertujuan untuk menggantikan kelas offset grid default kami, tetapi mereka tidak sepenuhnya sama. CSS Grid membuat template kisi melalui gaya yang memberi tahu browser untuk "mulai di kolom ini" dan "berakhir di kolom ini." Sifat-sifat tersebut adalah grid-column-startdan grid-column-end. Kelas awal adalah singkatan untuk yang pertama. Pasangkan dengan kelas kolom untuk mengukur dan menyelaraskan kolom sesuai kebutuhan. Kelas mulai dimulai pada 1nilai 0yang tidak valid untuk properti 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>

Kolom otomatis

Ketika tidak ada kelas pada item kisi (anak langsung dari a .grid), setiap item kisi akan secara otomatis berukuran satu kolom.

<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>

Perilaku ini dapat dicampur dengan kelas kolom kisi.

<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

Mirip dengan sistem grid default kami, CSS Grid kami memungkinkan penyarangan .grids. Namun, tidak seperti default, kisi ini mewarisi perubahan pada baris, kolom, dan celah. Perhatikan contoh di bawah ini:

• Kami mengganti jumlah kolom default dengan variabel CSS lokal: --bs-columns: 3.
• Di kolom otomatis pertama, jumlah kolom diwarisi dan setiap kolom adalah sepertiga dari lebar yang tersedia.
• Di kolom otomatis kedua, kami telah mengatur ulang jumlah kolom pada nested .gridmenjadi 12 (default kami).
• Kolom otomatis ketiga tidak memiliki konten bersarang.

Dalam praktiknya, ini memungkinkan tata letak yang lebih kompleks dan khusus jika dibandingkan dengan sistem grid default 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 jumlah kolom, jumlah baris, dan lebar celah dengan variabel CSS lokal.

Variabel CSS ini tidak memiliki nilai default; sebagai gantinya, mereka menerapkan nilai fallback yang digunakan hingga instance lokal disediakan. Misalnya, kami menggunakan var(--bs-rows, 1)baris Grid CSS kami, yang diabaikan --bs-rowskarena itu belum disetel di mana pun. Setelah itu, .gridinstance akan menggunakan nilai itu alih-alih nilai fallback dari 1.

Tidak ada kelas grid

Elemen turunan langsung dari .gridadalah item kisi, jadi mereka akan berukuran tanpa menambahkan .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>

Kolom dan celah

Sesuaikan jumlah kolom dan celah.

<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>

Menambahkan baris

Menambahkan lebih banyak baris dan mengubah penempatan kolom:

<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>

kesenjangan

Ubah celah vertikal hanya dengan memodifikasi file row-gap. Perhatikan bahwa kita menggunakan gappada .grids, tetapi row-gapdan column-gapdapat dimodifikasi sesuai kebutuhan.

<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>

Karena itu, Anda dapat memiliki gaps vertikal dan horizontal yang berbeda, yang dapat mengambil satu nilai (semua sisi) atau sepasang nilai (vertikal dan horizontal). Ini dapat diterapkan dengan gaya sebaris untuk gap, atau dengan --bs-gapvariabel 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>

Kelancangan

Salah satu batasan CSS Grid adalah bahwa kelas default kita masih dihasilkan oleh dua variabel Sass, $grid-columnsdan $grid-gutter-width. Ini secara efektif menentukan sebelumnya jumlah kelas yang dihasilkan dalam CSS yang dikompilasi. Anda memiliki dua opsi di sini:

• Ubah variabel Sass default tersebut dan kompilasi ulang CSS Anda.
• Gunakan gaya sebaris atau kustom untuk menambah kelas yang disediakan.

Misalnya, Anda dapat menambah jumlah kolom dan mengubah ukuran celah, lalu mengukur "kolom" Anda dengan campuran gaya sebaris dan kelas kolom Kotak CSS yang telah ditentukan sebelumnya (misalnya, .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>