Tailwind CSS menawarkan sistem grid yang membolehkan pengguna membahagikan halaman web kepada lajur dan baris menggunakan utiliti grid-cols dan grid-rows. Ia juga menyediakan utiliti permulaan dan tamat lajur grid untuk mengawal saiz dan penempatan elemen merentas lajur grid. Utiliti ini membenarkan pengguna untuk menentukan kedudukan permulaan dan penamat sesuatu elemen dalam susun atur grid.
Artikel ini akan menerangkan kaedah untuk membuat lajur bermula atau berakhir pada garis grid ke-n tertentu dalam CSS Tailwind.
Bagaimana untuk Membuat Lajur Bermula atau Berakhir pada Garisan Grid ke-n dalam Tailwind?
Untuk membuat lajur bermula atau berakhir pada garis grid ke-n dalam Tailwind, gunakan ' col-start-
Langkah 1: Tentukan Kedudukan Permulaan dan Penamatan Elemen Grid dalam Program HTML
Buat program HTML dan gunakan ' col-start-
< badan >
< h1 kelas = 'pusat teks-2xl' >
Tailwind CSS - Mula Lajur / tamat
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 >
badan >
Di sini, dalam elemen
- “ grid ” digunakan untuk membuat susun atur grid.
- “ grid-cols-4 ” kelas menentukan bahawa grid harus mempunyai 4 lajur yang sama saiz.
- “ jurang-3 kelas ” menetapkan jarak 3 unit antara setiap item grid.
- “ m-3 ” kelas menambah margin 3 unit di sekeliling bekas grid.
Dalam elemen
- “ col-start-2 sifat ” menyatakan bahawa item grid bermula pada lajur 2.
- “ col-span-2 ” menunjukkan bahawa item grid menduduki 2 lajur.
- “ col-start-1 ” digunakan untuk memulakan item grid dari lajur 1.
- “ col-end-3 ” menyatakan bahawa item grid berakhir pada lajur 3.
- “ col-start-3 ” menunjukkan bahawa item grid bermula dari lajur kedua.
- “ col-end-5 sifat ” menamatkan item grid di lajur 5.
- “ col-span-3 ” menyatakan bahawa item grid menduduki 3 lajur.
- “ bg-teal-500 ” menetapkan warna teal kepada latar belakang semua item grid.
- “ p-5 ” menambah padding 5 unit pada kandungan di dalam item grid.
Langkah 2: Sahkan Output
Untuk memastikan kedudukan permulaan dan penamat lajur grid telah digunakan, lihat halaman web HTML:
Output di atas menunjukkan bahawa kedudukan permulaan dan penamat lajur grid telah berjaya digunakan mengikut yang ditetapkan.
Kesimpulan
Untuk membuat lajur bermula atau berakhir pada garis grid ke-n dalam Tailwind, ' col-start-