Dalam CSS Tailwind, rentang baris menjadikan elemen menduduki dua atau lebih baris dalam grid. Ia digunakan untuk menentukan bilangan baris yang perlu diduduki/span oleh elemen. Ia membenarkan pengguna melaraskan saiz dan kedudukan item grid merentas berbilang baris dan membuat reka letak yang berbeza. Selain itu, ia boleh digunakan untuk mencipta susun atur grid yang fleksibel dan responsif untuk halaman web.
Tulisan ini akan menunjukkan kaedah untuk membuat rentang baris dalam CSS Tailwind.
Bagaimana untuk Membuat Span Baris dalam Tailwind?
Untuk membuat rentang baris dalam Tailwind, buat program HTML. Kemudian, gunakan ' row-span-
Untuk pelaksanaan praktikal, lihat langkah-langkah yang disediakan:
Langkah 1: Buat Span Lajur dalam Program HTML
Buat program HTML dan gunakan ' row-span-
< badan >
< div kelas = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div kelas = 'baris-span-3 bg-teal-500 p-5' > 1 < / div >
< div kelas = 'bg-teal-500 p-5' > 2 < / div >
< div kelas = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div kelas = 'bg-teal-500 p-5' > 4 < / div >
< div kelas = 'bg-teal-500 p-5' > 5 < / div >
< div kelas = 'baris-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / badan >
Di sini, dalam elemen
- “ grid ” kelas digunakan untuk mencipta susun atur grid.
- “ grid-row-4 ” kelas menetapkan nombor baris dalam grid kepada 4.
- “ grid-flow-col ” kelas meletakkan item grid secara mendatar dalam lajur.
- “ jurang-3 kelas ” menetapkan jarak 3 unit antara setiap item grid.
- “ m-3 ” kelas menggunakan margin 3 unit di sekeliling bekas grid.
- “ pusat teks ” kelas menetapkan teks setiap item grid ke tengah.
Dalam elemen
- “ row-span-3 ” kelas menentukan bahawa elemen harus merentasi 3 baris dalam grid.
- “ row-span-2 kelas ” menunjukkan bahawa elemen harus merentasi 2 baris dalam grid.
- “ row-span-4 ” kelas menentukan bahawa elemen harus merentasi 4 baris dalam grid.
- “ bg-teal-500 ” kelas menetapkan warna teal kepada latar belakang item grid.
- “ p-5 kelas ” menambah padding 5 unit pada kandungan di dalam item kanak-kanak.
Langkah 2: Sahkan Output
Lihat halaman web HTML untuk mengesahkan sama ada rentang baris telah digunakan atau tidak:
Dalam output di atas, dapat diperhatikan bahawa rentang baris telah berjaya digunakan mengikut yang ditentukan.
Kesimpulan
Untuk membuat rentang baris dalam Tailwind, gunakan ' row-span-
” utiliti dalam program HTML dan nyatakan bilangan baris setiap elemen perlu menjangkau. Untuk pengesahan, lihat perubahan pada halaman web HTML. Tulisan ini telah mencontohkan kaedah untuk membuat rentang baris dalam CSS Tailwind.