Tailwind CSS'de satır aralığı, bir öğenin ızgara içinde iki veya daha fazla satır işgal etmesini sağlar. Bir elemanın işgal etmesi/yayılması gereken satır sayısını tanımlamak için kullanılır. Kullanıcıların ızgara öğesinin boyutunu ve konumunu birden çok satırda ayarlamasına ve farklı düzenler oluşturmasına olanak tanır. Ayrıca, web sayfaları için esnek ve duyarlı ızgara düzenleri oluşturmak için kullanılabilir.
Bu yazı, Tailwind CSS'de satır aralığı oluşturma yöntemini örnekleyecektir.
Tailwind'de Satır Açıklığı Nasıl Yapılır?
Tailwind'de satırların yayılmasını sağlamak için bir HTML programı yapın. Ardından, “ satır aralığı-
Pratik uygulama için sağlanan adımlara göz atın:
Adım 1: HTML Programında Sütun Yayılması Yapın
Bir HTML programı oluşturun ve “ satır aralığı-
< vücut >
< div sınıf = 'grid grid-rows-4 grid-flow-col boşluk-3 m-3 metin merkezi' >
< div sınıf = 'satır aralığı-3 bg-teal-500 p-5' > 1 < / div >
< div sınıf = 'bg-teal-500 p-5' > 2 < / div >
< div sınıf = 'satır aralığı-2 bg-teal-500 p-5' > 3 < / div >
< div sınıf = 'bg-teal-500 p-5' > 4 < / div >
< div sınıf = 'bg-teal-500 p-5' > 5 < / div >
< div sınıf = 'satır aralığı-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / vücut >
Burada, üst
- “ Kafes ” sınıfı, bir ızgara düzeni oluşturmak için kullanılır.
- “ ızgara-sıra-4 ” sınıfı, ızgaradaki satır sayısını 4 olarak ayarlar.
- “ grid-flow-col ” sınıfı, ızgara öğelerini yatay olarak sütunlara yerleştirir.
- “ boşluk-3 ” sınıfı, her ızgara öğesi arasında 3 birimlik bir boşluk ayarlar.
- “ m-3 ” sınıfı, ızgara kabının etrafına 3 birimlik bir kenar boşluğu uygular.
- “ metin merkezi ” sınıfı, her ızgara öğesinin metnini merkeze ayarlar.
Alt
- “ satır aralığı-3 ” sınıfı, öğenin ızgarada 3 sıra boyunca yayılması gerektiğini belirtir.
- “ satır aralığı-2 ” sınıfı, öğenin ızgarada 2 sıra boyunca yayılması gerektiğini belirtir.
- “ satır aralığı-4 ” sınıfı, öğenin ızgarada 4 sıra boyunca yayılması gerektiğini belirtir.
- “ bg-teal-500 ” sınıfı, deniz mavisi rengini ızgara öğesinin arka planına ayarlar.
- “ p-5 ” sınıfı, alt öğelerinin içindeki içeriğe 5 birimlik bir dolgu ekler.
2. Adım: Çıktıyı Doğrulayın
Satır aralığının uygulanıp uygulanmadığını doğrulamak için HTML web sayfasını görüntüleyin:
Yukarıdaki çıktıda satır aralığının belirtilene göre başarılı bir şekilde uygulandığı görülmektedir.
Çözüm
Tailwind'de satırların yayılmasını sağlamak için ' satır aralığı-
” yardımcı programını kullanın ve her öğenin yayması gereken satır sayısını belirtin. Doğrulama için HTML web sayfasındaki değişiklikleri görüntüleyin. Bu yazı, Tailwind CSS'de bir satır aralığı oluşturma yöntemini örneklemiştir.