Artikel ini akan memberi contoh kaedah untuk menggunakan titik putus dan pertanyaan media pada grid baris dalam CSS Tailwind.
Bagaimana untuk Memohon Titik Putus dan Pertanyaan Media pada Grid Baris dalam Tailwind?
Untuk menggunakan titik putus dan pertanyaan media pada grid baris dalam Tailwind, buat program HTML. Kemudian, tentukan bilangan baris untuk pelbagai saiz skrin menggunakan ' sm ”, “ md ” atau “ lg ” titik putus dengan “ grid-rows-
Mari kita terokai pelaksanaan praktikal:
Langkah 1: Gunakan Titik Putus dan Pertanyaan Media Dengan Grid Baris dalam Program HTML
Buat program HTML dan tentukan bilangan baris untuk saiz skrin yang berbeza dengan “ grid-rows-
< badan >
< div kelas = 'grid-rows-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div kelas = 'bg-teal-500 p-5' > 1 < / div >
< div kelas = 'bg-teal-500 p-5' > 2 < / div >
< div kelas = '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 = 'bg-teal-500 p-5' > 6 < / div >
< div kelas = 'bg-teal-500 p-5' > 7 < / div >
< div kelas = 'bg-teal-500 p-5' > 8 < / div >
< div kelas = 'bg-teal-500 p-5' > 9 < / div >
< div kelas = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / badan >
di sini:
- “ grid ” kelas digunakan untuk membuat susun atur grid.
- “ grid-rows-2 ” kelas menentukan bahawa grid harus mempunyai 2 baris bersaiz sama.
- “ md:grid-rows-3 ” kelas menukar grid kepada 3 baris bersaiz sama pada saiz skrin sederhana.
- “ lg:grid-rows-5 ” kelas menukar grid kepada 5 baris bersaiz sama pada saiz skrin besar.
- “ 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.
- “ bg-teal-500 ” kelas menetapkan warna teal kepada latar belakang item grid.
- “ p-5 ” kelas menambah padding 5 unit kepada kandungan di dalam kanak-kanak
barang.
Langkah 2: Sahkan Output
Untuk memastikan titik putus dan pertanyaan media telah digunakan pada grid baris, lihat halaman web HTML dengan menukar saiz skrin:
Dalam output di atas, dapat dilihat bahawa bilangan baris berubah mengikut saiz skrin. Ini menunjukkan bahawa titik putus dan pertanyaan media telah digunakan pada grid baris dengan jayanya.
Kesimpulan
Untuk menggunakan titik putus dan pertanyaan media pada grid baris dalam Tailwind, tentukan bilangan baris untuk pelbagai saiz skrin menggunakan ' sm ”, “ md ” atau “ lg ” titik putus dengan “ grid-rows-
” utiliti. Kemudian, pastikan perubahan pada halaman web dengan menukar saiz skrin. Artikel ini telah memberi contoh kaedah untuk menggunakan titik putus dan pertanyaan media pada grid baris dalam CSS Tailwind.