Celah - Trik CSS

Properti gap di CSS adalah singkatan dari row-gapdan column-gap, menentukan ukuran talang, yang merupakan ruang antara baris dan kolom dalam tata letak kisi, fleksibel, dan multi-kolom.

/* 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 penggeser pada demo di bawah ini untuk melihat gapproperti beraksi:

Sintaksis

gap menerima satu atau dua nilai:

• Satu nilai menetapkan keduanya row-gapdan column-gapdengan nilai yang sama.
• Ketika dua nilai digunakan, yang pertama mengatur row-gapdan yang kedua mengatur 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 Modul Tata Letak Kisi CSS menentukan ruang antara trek kisi menggunakan grid-gapproperti. gapdimaksudkan untuk menggantikannya sehingga celah dapat didefinisikan dalam beberapa metode tata letak CSS, seperti flexbox, tetapi grid-gapmasih perlu digunakan dalam kasus di mana browser mungkin telah mengimplementasikan grid-gaptetapi belum mulai mendukung gapproperti yang lebih baru .

Nilai

gap menerima nilai-nilai berikut:

• normal: (Default) Browser akan menentukan nilai yang digunakan 1em untuk layout multi-kolom dan 0px untuk semua konteks layout lainnya (yaitu grid dan flex).
• : Apa saja Panjang CSS yang valid dan non-negatif, seperti px, em, remdan %, antara lain.
• : Ukuran celah sebagai nilai persentase non-negatif relatif terhadap dimensi elemen. (Lihat di bawah untuk detailnya.)
• initial: Menerapkan pengaturan default properti, yaitu normal.
• inherit: Mengadopsi nilai celah induk.
• unset: Menghapus arus gapdari elemen.

Persentase dalam properti gap

Saat ukuran wadah dalam dimensi celah pasti, gapmenyelesaikan persentase terhadap ukuran kotak konten wadah di semua tipe tata letak.

Dengan kata lain, saat browser mengetahui ukuran container, ia dapat menghitung nilai persentase dari gap. Misalnya, ketika tinggi wadah adalah 100 piksel dan gapdisetel ke 10%, browser tahu bahwa 10% dari 100 piksel adalah 10 piksel.

Namun saat browser tidak mengetahui ukurannya, browser akan bertanya-tanya, “10% dari apa?” Dalam kasus ini, gapberperilaku berbeda berdasarkan jenis tata letak.

Dalam tata letak kisi, persentase menyelesaikan dengan nol untuk menentukan kontribusi ukuran intrinsik, tetapi mengatasi kotak konten elemen saat menata konten kotak, yang berarti itu akan menempatkan spasi di antara item tetapi spasi tidak memengaruhi ukuran wadah.

Dalam demo ini, ketinggian wadah tidak pasti. Lihat apa yang terjadi jika Anda memperbesar gapukuran. Kemudian atur gapdalam satuan piksel dan coba lagi:

Dalam tata letak fleksibel, persentase menyelesaikan dengan nol dalam semua kasus, yang berarti bahwa celah tidak akan berlaku jika ukuran penampung tidak diketahui browser:

Menggunakan fungsi calc () dengan celah

Anda dapat menggunakan calc()fungsi untuk menentukan ukuran gaptetapi, pada saat tulisan ini dibuat, tidak ada dukungan untuk itu di 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 gapproperti dirancang untuk digunakan di grid, fleksibel dan multi-kolom layout. Mari kita lihat beberapa contoh.

Tata letak kisi

Dalam demo berikut, Anda dapat melihat gapdigunakan untuk menentukan properti row-gapdan column-gappada wadah kisi, masing-masing menentukan selokan antara baris kisi dan kolom kisi:

Tata letak fleksibel

Menerapkan celah ke sumbu utama wadah fleksibel menunjukkan jarak antara item fleksibel dalam satu baris tata letak fleksibel.

Ini column-gapdigunakan dalam arah baris:

Ini row-gapdigunakan dalam arah kolom:

Menerapkan gapke sumbu silang dari wadah fleksibel menunjukkan jarak antara garis fleksibel dari tata letak fleksibel.

Berikut row-gaparah barisnya:

Berikut column-gaparah kolom:

Tata letak multi-kolom

column-gapmuncul di tata letak multi-kolom untuk membuat celah di antara kotak kolom, tetapi perhatikan itu row-gaptidak berpengaruh karena kami hanya bekerja di kolom. gapmasih dapat digunakan dalam konteks ini, tetapi hanya column-gapkemauan yang diterapkan.

Seperti yang Anda lihat di demo berikutnya, meskipun gapproperti memiliki nilai 2rem, properti ini hanya memisahkan item secara horizontal dan bukan kedua arah karena kami sedang mengerjakan kolom:

Semakin banyak Anda tahu…

Ada beberapa hal yang perlu diperhatikan tentang bekerja dengan gapproperti.

It’s a nice way to prevent unwanted spacing

Have you ever used margins to create spacing between elements? If we’re not careful, we can end up with extra spacing before and after the group of items.

Solving that usually requires adding negative margins or resorting to pseudo-selectors to remove margin from specific items. But the nice thing about using gap in more modern layout methods is that you only have space between items. The extra cruft at the start and end is never an issue!

But, hey, if you want to have space around the items while using gap, put padding around the container like this:

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

Gutter size is not always equal to the gap value

The gap property is not the only thing that can put space between items. Margins, paddings, justify-content and align-content can also increase the size of the gutter and affect the actual gap value.

In the following example, we’re setting a 1em gap but, as you can see, there is much more space between the items, caused by the use of distributed alignments, like justify-content and align-content:

Browser support

Feature queries are usually a nice way to check if a browser supports a specific property, but in this case, if you check for the gap property in flexbox, you may get a false positive because a feature query won’t distinguish between layout modes. In other words, it might be supported in a flex layout which results in a positive result, but it is actually not supported if it’s used in a grid layout.

Grid layout

IE	Edge	Firefox	Chrome	Safari	Opera
No	16+	61+	66+	12+	53+

iOS Safari	Opera Mobile	Android Browser	Chrome for Android	Firefox for Android
12+	No	81+	84+	68+

Grid layout with calc() values

IE	Edge	Firefox	Chrome	Safari	Opera
No	84+	79+	84+	No	69+

iOS Safari	Opera Mobile	Android Browser	Chrome for Android	Firefox for Android
No	No	81+	84+	68+

Grid layout with percentage value

IE	Edge	Firefox	Chrome	Safari	Opera
No	84+	79+	84+	No	69+

iOS Safari	Opera Mobile	Android Browser	Chrome for Android	Firefox for Android
No	No	81+	84+	68+

Flex layout

The specification for using gap with flexbox is currently in Working Draft status.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome	Firefox	YAITU	Tepi	Safari
84	63	Tidak	84	TP

Ponsel / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	Tidak	Tidak

Tata letak multi-kolom

YAITU	Tepi	Firefox	Chrome	Safari	Opera
Tidak	84+	79+	84+	Tidak	69+

iOS Safari	Opera Mobile	Browser Android	Chrome untuk Android	Firefox untuk Android
Tidak	Tidak	81+	84+	68+

Informasi lebih lanjut

• Modul Penyelarasan Kotak CSS Level 3
• Chromium mendapatkan celah Flexbox (Tiket # 761904)
• Status Fitur CSS WebKit

Terkait

• Tata Letak Kisi
• Tata Letak Flexbox
• Tata Letak Multi-Kolom