CSS grid ile gelen ögeler arasında boşluk verme özelliği(grid-gap) flex özelliğine de geldi. Çok yerinde bir geliştirme. Daha önce eksi margin ve farklı yöntemlerle çözmeye çalıştığımız bu işi tek bir tanım ile çözmek süper. Tabi grid-gap olarak standartlaşan yapı genele yayıdığı için artık gap olarak yoluna devam edecek.
Şu an Firefox (63+) ve Chrome 84 destekliyor. Safari’ye de destek gelirse değme keyfimize.
Hemen bir örnek üzerinde test edelim.
Görüldüğü gibi gap değeri sadece yatayda değil yatayda (column-gap) ve dikeyde (row-gap) tanımlanabiliyor. gap tanımı yatay ve dikey için ortak değer olduğunda kısaltma olarak kullanılabilir.
Çoklu kolon’a da gap desteği geldi. Çok fazla kullanmasam CSS3 Çoklu Kolonlara da gap desteği gelmiş olması sevindirici. Daha önce column-gap olarak kullandığımız değer artık gap oldu.
Kalın sağlıcakla.
Kaynaklar
- https://web.dev/flexbox-gap/
- https://developer.mozilla.org/en-US/docs/Web/CSS/gap
- https://medium.com/@schofeld/mind-the-flex-gap-c9cd1b4b35d8
- https://coryrylan.com/blog/css-gap-space-with-flexbox (Eski yöntem)
- https://caniuse.com/#feat=flexbox-gap
- https://www.bram.us/2020/05/12/spacing-grid-flexbox-items-in-css-with-the-gap-property/