Di Tailwind CSS, rentang baris membuat elemen menempati dua baris atau lebih dalam petak. Ini digunakan untuk menentukan jumlah baris yang harus ditempati/rentang oleh suatu elemen. Ini memungkinkan pengguna untuk menyesuaikan ukuran dan posisi item kisi di beberapa baris dan membuat tata letak yang berbeda. Selain itu, dapat digunakan untuk membuat tata letak kisi yang fleksibel dan responsif untuk halaman web.
Tulisan ini akan mencontohkan metode untuk membuat rentang baris di Tailwind CSS.
Bagaimana Cara Membuat Rentang Baris di Tailwind?
Untuk membuat baris terbentang di Tailwind, buatlah program HTML. Kemudian, gunakan ' baris-rentang-
Untuk implementasi praktis, lihat langkah-langkah yang disediakan:
Langkah 1: Buat Rentang Kolom dalam Program HTML
Buat program HTML dan gunakan “ baris-rentang-
< tubuh >
< div kelas = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div kelas = 'baris-rentang-3 bg-teal-500 p-5' > 1 < / div >
< div kelas = 'bg-teal-500 p-5' > 2 < / div >
< div kelas = 'baris-rentang-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-rentang-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / tubuh >
Di sini, di elemen
- “ kisi ” Kelas digunakan untuk membuat tata letak kisi.
- “ kisi-baris-4 ” kelas mengatur nomor baris dalam kisi menjadi 4.
- “ grid-flow-col ” kelas menempatkan item kisi secara horizontal dalam kolom.
- “ celah-3 ” kelas mengatur jarak 3 unit antara setiap item grid.
- “ m-3 ” kelas menerapkan margin 3 unit di sekitar wadah kisi.
- “ pusat teks ” kelas menyetel teks dari setiap item kisi ke tengah.
Dalam elemen
- “ baris-rentang-3 ” kelas menentukan bahwa elemen harus menjangkau 3 baris dalam kisi.
- “ baris-rentang-2 ” kelas menunjukkan bahwa elemen harus menjangkau 2 baris dalam kisi.
- “ baris-rentang-4 ” kelas menentukan bahwa elemen harus menjangkau 4 baris dalam kisi.
- “ bg-teal-500 ” kelas menyetel warna teal ke latar belakang item kisi.
- “ hal-5 ” class menambahkan padding 5 unit ke konten di dalam item anak.
Langkah 2: Verifikasi Keluaran
Lihat halaman web HTML untuk memverifikasi apakah rentang baris telah diterapkan atau tidak:
Pada keluaran di atas, dapat diamati bahwa rentang baris telah berhasil diterapkan sesuai dengan yang ditentukan.
Kesimpulan
Untuk membuat baris terbentang di Tailwind, gunakan tombol “ baris-rentang-
” dalam program HTML dan tentukan jumlah baris yang harus dibentang oleh setiap elemen. Untuk verifikasi, lihat perubahan pada halaman web HTML. Tulisan ini telah mencontohkan metode untuk membuat rentang baris di Tailwind CSS.