Jurang - Trik CSS

Properti jurang dalam CSS adalah singkatan untuk row-gapdan column-gap, menentukan ukuran selokan, yang merupakan ruang antara baris dan lajur dalam susunan grid, fleksibel, dan multi-lajur.

/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )

Gunakan slaid dalam demo di bawah ini untuk melihat gapharta benda beraksi:

Sintaks

gap menerima satu atau dua nilai:

• Nilai tunggal menetapkan kedua row-gap- duanya dan column-gapdengan nilai yang sama.
• Apabila dua nilai digunakan, yang pertama menetapkan row-gapdan yang kedua menetapkan column-gap.

.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )

Spesifikasi untuk CSS Grid Layout Module menentukan ruang antara trek grid menggunakan grid-gapproperti. gapdimaksudkan untuk menggantinya sehingga jurang dapat didefinisikan dalam beberapa kaedah susun atur CSS, seperti flexbox, tetapi grid-gapmasih perlu digunakan dalam keadaan di mana penyemak imbas mungkin telah melaksanakan grid-gaptetapi belum mulai menyokong gapharta yang lebih baru .

Nilai

gap menerima nilai berikut:

• normal: (Default) Penyemak imbas akan menentukan nilai terpakai 1em untuk susun atur berbilang lajur dan 0px untuk semua konteks susun atur lain (iaitu grid dan flex).
• : Mana-mana Panjang CSS sah dan bukan negatif, seperti px, em, remdan %, antara lain.
• : Ukuran jurang sebagai nilai peratusan bukan negatif berbanding dengan dimensi elemen. (Lihat di bawah untuk maklumat lanjut.)
• initial: Terpakai tetapan lalai hartanah, yang adalah normal.
• inherit: Mengamalkan nilai jurang ibu bapa.
• unset: Mengeluarkan arus gapdari elemen.

Peratusan sifat jurang

Apabila ukuran bekas dalam dimensi jurang sudah pasti, gapmenyelesaikan peratusan berbanding ukuran kotak kandungan bekas dalam jenis susun atur apa pun.

Dengan kata lain, apabila penyemak imbas mengetahui ukuran bekas, ia dapat mengira nilai peratusan gap. Sebagai contoh, apabila ketinggian bekas adalah 100 piksel dan gapditetapkan ke 10%, penyemak imbas mengetahui bahawa 10% dari 100 piksel adalah 10 piksel.

Tetapi apabila penyemak imbas tidak mengetahui ukurannya, akan tertanya-tanya, "10% dari apa?" Dalam kes ini, gapberkelakuan berbeza berdasarkan jenis susun atur.

Dalam susun atur grid, peratusan diselesaikan terhadap sifar untuk menentukan sumbangan ukuran intrinsik, tetapi menyelesaikannya terhadap kotak isi elemen ketika meletakkan isi kotak, yang bermaksud akan meletakkan ruang di antara item tetapi ruang tidak mempengaruhi ukuran kontena.

Dalam demo ini, ketinggian kontena tidak pasti. Lihat apa yang berlaku apabila anda menambah gapukuran. Kemudian tetapkan gapunit piksel dan cuba lagi:

Dalam susun atur yang lentur, peratusan dapat diselesaikan berbanding sifar dalam semua keadaan, yang bermaksud bahawa jurang tidak akan berlaku ketika ukuran bekas tidak diketahui oleh penyemak imbas:

Menggunakan fungsi calc () dengan jurang

Anda boleh menggunakan calc()fungsi untuk menentukan ukuran gaptetapi, pada saat penulisan ini, tidak ada sokongan untuknya pada Safari dan iOS.

.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); ) 
 .grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )

Contoh

The gapharta direka untuk digunakan dalam grid, flex dan berbilang lajur susun atur. Mari lihat beberapa contoh.

Susun atur grid

Dalam demo berikut, anda dapat melihat gapdigunakan untuk menentukan row-gapdan column-gapsifat pada bekas grid, yang menentukan selokan antara baris grid dan lajur grid, masing-masing:

Susun atur lentur

Menerapkan jurang ke paksi utama wadah flex menunjukkan jarak antara item lentur dalam satu baris susun atur lentur.

Ini column-gapdigunakan dalam arah berturut-turut:

Ini row-gapdigunakan dalam arah lajur:

Berlaku gappada paksi silang bekas fleksibel menunjukkan jarak antara garis lurus susun atur lentur.

Inilah row-gaparah berturut-turut:

Inilah column-gaparah lajur:

Susun atur berbilang lajur

column-gapmuncul dalam susun atur berbilang lajur untuk membuat jurang antara kotak lajur, tetapi perhatikan yang row-gaptidak berpengaruh kerana kami hanya bekerja di lajur. gapmasih boleh digunakan dalam konteks ini, tetapi hanya column-gapkehendak yang akan digunakan.

Seperti yang anda lihat dalam demo seterusnya, walaupun gapharta itu mempunyai nilai 2rem, ia hanya memisahkan item secara mendatar dan bukan kedua-dua arah kerana kami sedang bekerja di lajur:

Semakin banyak yang anda tahu ...

Terdapat beberapa perkara yang perlu diperhatikan mengenai bekerja dengan gapharta tanah.

Ini adalah kaedah yang baik untuk mengelakkan jarak yang tidak diingini

Adakah anda pernah menggunakan margin untuk membuat jarak antara elemen? Sekiranya kita tidak berhati-hati, kita boleh berakhir dengan jarak tambahan sebelum dan selepas kumpulan barang.

Menyelesaikan yang biasanya memerlukan penambahan margin negatif atau menggunakan pemilih semu untuk membuang margin dari item tertentu. Tetapi perkara yang senang digunakan gapdalam kaedah susun atur yang lebih moden ialah anda hanya mempunyai ruang antara item. Kekurangan tambahan pada awal dan akhir tidak pernah menjadi masalah!

Tapi, hei, jika anda ingin mempunyai ruang di sekitar barang semasa menggunakan gap, letakkan di paddingsekitar bekas seperti ini:

.container ( display: flex; gap: 1rem; padding: 1rem; )

Ukuran selokan tidak selalu sama dengan nilai jurang

The gapharta bukan satu-satunya perkara yang boleh meletakkan ruang di antara barang-barang. Margin, paddings, justify-contentdan align-contentjuga dapat meningkatkan ukuran selokan dan mempengaruhi nilai sebenarnya gap.

Dalam contoh berikut, kami menetapkan 1em gaptetapi, seperti yang anda lihat, terdapat lebih banyak ruang di antara item, yang disebabkan oleh penggunaan penjajaran yang diedarkan, seperti justify-contentdan align-content:

Sokongan penyemak imbas

Pertanyaan ciri biasanya merupakan cara yang baik untuk memeriksa sama ada penyemak imbas menyokong harta tertentu, tetapi dalam kes ini, jika anda memeriksa gapharta itu dalam kotak fleksibel, anda mungkin mendapat positif palsu kerana pertanyaan ciri tidak akan membezakan antara mod susun atur. Dengan kata lain, mungkin disokong dalam susun atur lentur yang menghasilkan hasil positif, tetapi sebenarnya tidak disokong jika digunakan dalam tata letak grid.

Susun atur grid

IE	Hujung	Firefox	Chrome	Safari	Opera
Tidak	16+	61+	66+	12+	53+

Safari iOS	Opera Mudah Alih	Penyemak Imbas Android	Chrome untuk Android	Firefox untuk Android
12+	Tidak	81+	84+	68+

Susun atur grid dengan nilai calc ()

IE	Hujung	Firefox	Chrome	Safari	Opera
Tidak	84+	79+	84+	Tidak	69+

Safari iOS	Opera Mudah Alih	Penyemak Imbas Android	Chrome untuk Android	Firefox untuk Android
Tidak	Tidak	81+	84+	68+

Susun atur grid dengan nilai peratusan

IE	Hujung	Firefox	Chrome	Safari	Opera
Tidak	84+	79+	84+	Tidak	69+

Safari iOS	Opera Mudah Alih	Penyemak Imbas Android	Chrome untuk Android	Firefox untuk Android
Tidak	Tidak	81+	84+	68+

Susun atur lentur

Spesifikasi untuk digunakan gapdengan flexbox saat ini dalam status Draf Kerja.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome	Firefox	IE	Hujung	Safari
84	63	Tidak	84	TP

Mudah Alih / Tablet

Android Chrome	Android Firefox	Android	Safari iOS
88	85	Tidak	Tidak

Susun atur berbilang lajur

IE	Hujung	Firefox	Chrome	Safari	Opera
Tidak	84+	79+	84+	Tidak	69+

Safari iOS	Opera Mudah Alih	Penyemak Imbas Android	Chrome untuk Android	Firefox untuk Android
Tidak	Tidak	81+	84+	68+

Maklumat lanjut

• Modul Penjajaran Kotak CSS Tahap 3
• Chromium mendarat jurang Flexbox (Tiket # 761904)
• Status Ciri CSK WebKit

Berkaitan

• Susun atur Grid
• Susun atur Kotak Flex
• Susun atur Pelbagai Lajur