Bu gönderi, Tailwind'de sütunlar arasına boşluk ekleme prosedürünün tamamını ayrıntılı olarak açıklamaktadır.
Tailwind'de Sütunlar Arasına Boşluk Nasıl Eklenir?
Tailwind'de sütunlar arasına boşluk eklemek için yerleşik ' boşluk-{boyut} ' Yarar. Yatay ve dikey olarak sütunlar arasındaki boşluğu temsil eden bir tamsayı değeri belirtir. Belirtilen örnekler yardımıyla bu görevi uygulamalı olarak yapalım.
Proje Dosya Yapısı
“ boşluk-{boyut} ” yardımcı programı, verilen dosya yapısını izleyen herhangi bir Tailwind projesinde uygulanabilir:
İlk örnekle başlayalım.
Örnek 1: Satırlar ve Sütunlar Arasına Aynı Boşluğu Eklemek için 'gap-{size}' Yardımcı Programını kullanın
Bu örnek, verilen sütunlar arasına aynı boşluğu yatay ve dikey olarak eklemek için 'gap-{size}' yardımcı programını uygular.
HTML Kodu
Aşağıdaki koda genel bakış:
< KAFA >
< bağlantı href = '/dist/output.css' rel = 'stil sayfası' >
< / KAFA >
< vücut >
< h1 sınıf = 'metin-3xl yazı tipi-kalın metin-merkez altı çizili metin-turuncu-600' > Linuxhint'e hoş geldiniz! < / h1 >< br >
< div sınıf = 'mx-2 grid grid-cols-3 boşluk-4' >
< div sınıf = 'kenar-2 sınır-turuncu-600' > İlk Eğitim < / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' > İkinci Öğretici < / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' > Üçüncü Öğretici < / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' > Dördüncü Öğretici < / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' > Beşinci Eğitim < / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' > Altıncı Eğitim < / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' > Yedinci Eğitim < / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' > Sekizinci Öğretici < / div >
< / div >
Yukarıdaki kod satırlarında:
- İlk olarak, ana CSS dosyasını “bağlayın” /dist/output.css ” mevcut HTML dosyası ile “ index.html ' kullanmak '
“head” bölümünde ” etiketi. - Daha sonra, 'body' bölümü, '
' öğesini kullanan bir '
' öğesi oluşturur. Yazı Boyutu ”, “ Yazı Tipi Ağırlığı ”, “ Metin hizalama ”, “ Metin Dekorasyonu ', ve ' Metin Rengi ” Sırasıyla Tailwind sınıfları.
- Bundan sonra, “ ifadesini uygulayan bir “” öğesi eklenir. Kafes ” içeriğini belirtilen sayıda ızgara düzeninde ayarlamak için yardımcı program, “ marj yatay kenar boşluğunu ayarlamak için ” sınıfı ve “ açıklık ” sütunlar arasına belirtilen boşluğu eklemek için yardımcı program.
- '
' öğesi gövde bölümünde, '' karakterini kullanan ek sekiz '' öğesi yer alır. Kenarlık Genişliği ' ve ' Sınır rengi ” sınıfları sırasıyla.Çıktı
Yukarıdaki HTML kodunu canlı sunucuda çalıştırın ve çıktıyı analiz edin:
Görüldüğü gibi, çıktı her iki boyuttaki sütunlar arasında belirtilen boşluğu uygun şekilde ekler.
Örnek 2: Satırlar ve Sütunlar Arasına Bağımsız Olarak Boşluk Eklemek için 'gap-{size}' Yardımcı Programını kullanın
“ boşluk-{boyut} ” yardımcı programı, satırlar için “gap-x-{size}” ve sütunlar için “gap-y-{size}” olarak “x(yatay)” ve “y(dikey)” boyutlarıyla da uygulanabilir. aralarındaki boşluk ayrı ayrı.Pratik uygulamasını görelim.
HTML Kodu
< KAFA >
Verilen koda bir göz atın:
< bağlantı href = '/dist/output.css' rel = 'stil sayfası' >
< / KAFA >
< vücut >
< div sınıf = 'mx-2 grid grid-cols-4 boşluk-x-4 boşluk-y-6' >
< div sınıf = 'kenar-2 sınır-turuncu-600' >İlk Eğitim< / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' >İkinci Eğitim< / div >
< div sınıf = 'kenarlık-2 sınır-turuncu-600' >Üçüncü Eğitim< / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' >Dördüncü Eğitim< / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' >Beşinci Eğitim< / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' >Altıncı Eğitim< / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' >Yedinci Eğitim< / div >
< div sınıf = 'kenar-2 sınır-turuncu-600' >Sekizinci Eğitim< / div >
< / div >
< vücut >Burada, “ boşluk-x-{boyut} ” yardımcı programı, satırlar arasındaki boşluğu ekler ve “ boşluk-y-{boyut} ” belirtilen boşluğu bağımsız olarak sütunlar arasına ekler.
Çıktı
Yukarıdaki sonuç, satırlar ve sütunlar arasındaki boşluğun buna göre uygulandığını doğrular.
Çözüm
'Tailwind CSS' yerleşik bir ' boşluk-{boyut} ” sütunlar arasına boşluk eklemek için yardımcı program. Ayrıca satırlar ve sütunlar arasındaki boşlukları ayrı ayrı eklemek için de kullanılabilir. boşluk-x-{boyut} ' ve ' boşluk-y-{boyut} ' araçlar. Bu gönderi, Tailwind'deki sütunlar arasındaki boşluğu eklemek için tüm prosedürü sağladı.
- '