Tailwind CSS, kullanıcıların grid-cols ve grid-rows yardımcı programlarını kullanarak web sayfasını sütunlara ve satırlara bölmesini sağlayan bir ızgara sistemi sunar. Ayrıca ızgara sütunları boyunca öğelerin boyutlandırılmasını ve yerleşimini kontrol etmek için ızgara sütunu başlangıç ve bitiş yardımcı programları sağlar. Bu yardımcı programlar, kullanıcıların ızgara düzeninde bir öğenin başlangıç ve bitiş konumlarını belirlemesine olanak tanır.
Bu makale, Tailwind CSS'de sütunların belirli n'inci ızgara çizgisinde başlamasını veya bitmesini sağlama yöntemini açıklayacaktır.
Tailwind'de Sütunların n'inci Izgara Çizgisinde Başlaması veya Bitmesi Nasıl Sağlanır?
Tailwind'de sütunların n'inci ızgara çizgisinde başlamasını veya bitmesini sağlamak için ' col-başlangıç-
Adım 1: HTML Programında Izgara Elemanlarının Başlangıç ve Bitiş Konumlarını Belirtin
Bir HTML programı yapın ve “ col-başlangıç-
< vücut >
< h1 sınıf = 'text-2xl metin merkezi' >
Tailwind CSS - Sütun Başlangıcı / Son
h1 >
< div sınıf = 'ızgara grid-cols-4 boşluk-3 m-3' >
< div sınıf = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div sınıf = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div sınıf = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div sınıf = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div sınıf = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
vücut >
Burada, üst
- “ Kafes ” ızgara düzeni oluşturmak için kullanılır.
- “ grid-cols-4 ” sınıfı, kılavuzun eşit boyutta 4 sütuna sahip olması gerektiğini belirtir.
- “ 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 ekler.
İç alt
- “ col-başlangıç-2 ” özelliği, ızgara öğesinin 2. sütunda başladığını belirtir.
- “ col-span-2 ”, ızgara öğesinin 2 sütun kapladığını gösterir.
- “ col-başlangıç-1 ”, ızgara öğesini sütun 1'den başlatmak için kullanılır.
- “ sütun sonu 3 ” ızgara öğesinin 3. sütunda bittiğini belirtir.
- “ col-başlangıç-3 ”, ızgara öğesinin ikinci sütundan başladığını belirtir.
- “ sütun sonu 5 ” özelliği, ızgara öğesini 5. sütunda sonlandırır.
- “ col-span-3 ” ızgara öğesinin 3 sütun kapladığını belirtir.
- “ bg-teal-500 ” deniz mavisi rengini tüm ızgara öğelerinin arka planına ayarlar.
- “ p-5 ” ızgara öğelerinin içindeki içeriğe 5 birimlik bir dolgu ekler.
2. Adım: Çıktıyı Doğrulayın
Kılavuz sütun başlangıç ve bitiş konumlarının uygulandığından emin olmak için HTML web sayfasını görüntüleyin:
Yukarıdaki çıktı, ızgara sütununun başlangıç ve bitiş konumlarının, tanımlandıklarına göre başarıyla uygulandığını gösterir.
Çözüm
Tailwind'de sütunların n'inci ızgara çizgisinde başlamasını veya bitmesini sağlamak için ' col-başlangıç-