Tailwind CSS menawarkan sistem grid yang memungkinkan pengguna membagi halaman web menjadi kolom dan baris menggunakan utilitas grid-cols dan grid-rows. Ini juga menyediakan utilitas awal dan akhir kolom kisi untuk mengontrol ukuran dan penempatan elemen di seluruh kolom kisi. Utilitas ini memungkinkan pengguna untuk menentukan posisi awal dan akhir elemen dalam tata letak grid.
Artikel ini akan menjelaskan metode untuk membuat kolom dimulai atau diakhiri pada garis petak ke-n tertentu di Tailwind CSS.
Bagaimana Cara Membuat Kolom Mulai atau Berakhir pada Garis Kisi ke-n di Tailwind?
Untuk membuat kolom dimulai atau diakhiri pada garis petak ke-n di Tailwind, gunakan tombol “ col-mulai-
Langkah 1: Tentukan Posisi Awal dan Akhir Elemen Kisi dalam Program HTML
Buat program HTML dan gunakan tombol “ col-mulai-
< tubuh >
< h1 kelas = 'pusat teks teks-2xl' >
Tailwind CSS - Mulai Kolom / Akhir
h1 >
< div kelas = 'grid grid-cols-4 gap-3 m-3' >
< div kelas = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div kelas = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div kelas = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div kelas = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div kelas = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
tubuh >
Di sini, di elemen
- “ kisi ” digunakan untuk membuat tata letak kisi.
- “ grid-cols-4 ” kelas menentukan bahwa kisi harus memiliki 4 kolom berukuran sama.
- “ celah-3 ” kelas mengatur jarak 3 unit antara setiap item grid.
- “ m-3 ” kelas menambahkan margin 3 unit di sekitar wadah kisi.
Dalam elemen
- “ col-mulai-2 ” properti menentukan bahwa item kisi dimulai pada kolom 2.
- “ col-span-2 ” menunjukkan bahwa item kisi menempati 2 kolom.
- “ col-mulai-1 ” digunakan untuk memulai item grid dari kolom 1.
- “ col-akhir-3 ” menentukan bahwa item grid berakhir pada kolom 3.
- “ col-mulai-3 ” menunjukkan bahwa item kisi dimulai dari kolom kedua.
- “ col-akhir-5 ” properti mengakhiri item kisi di kolom 5.
- “ col-span-3 ” menentukan bahwa item kisi menempati 3 kolom.
- “ bg-teal-500 ” menyetel warna hijau ke latar belakang semua item kisi.
- “ hal-5 ” menambahkan padding 5 unit ke konten di dalam item grid.
Langkah 2: Verifikasi Keluaran
Untuk memastikan bahwa posisi awal dan akhir kolom kisi telah diterapkan, lihat halaman web HTML:
Output di atas menunjukkan bahwa posisi awal dan akhir kolom grid telah berhasil diterapkan sesuai dengan yang ditentukan.
Kesimpulan
Untuk membuat kolom dimulai atau diakhiri pada garis petak ke-n di Tailwind, tombol “ col-mulai-