Artikel ini akan memberikan contoh metode untuk menerapkan breakpoint dan kueri media pada petak baris di Tailwind CSS.
Bagaimana Cara Menerapkan Breakpoints dan Media Queries pada Row Grid di Tailwind?
Untuk menerapkan breakpoint dan kueri media pada petak baris di Tailwind, buat program HTML. Kemudian, tentukan jumlah baris untuk berbagai ukuran layar menggunakan tombol “ sm ”, “ md ' atau ' lg ” breakpoint dengan “ kisi-baris-
Mari kita jelajahi implementasi praktisnya:
Langkah 1: Gunakan Breakpoints dan Media Queries Dengan Row Grid di Program HTML
Buat program HTML dan tentukan jumlah baris untuk ukuran layar yang berbeda dengan “ kisi-baris-
< tubuh >
< div kelas = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 pusat teks' >
< 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 >
< / tubuh >
Di Sini:
- “ kisi ” Kelas digunakan untuk membuat tata letak kisi.
- “ grid-baris-2 ” kelas menentukan bahwa kisi harus memiliki 2 baris berukuran sama.
- “ md: petak-baris-3 ” kelas mengubah kisi menjadi 3 baris berukuran sama pada ukuran layar sedang.
- “ lg: petak-baris-5 ” kelas mengubah kisi menjadi 5 baris berukuran sama pada ukuran layar besar.
- “ 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.
- “ bg-teal-500 ” kelas menyetel warna hijau ke latar belakang item kisi.
- “ hal-5 ” kelas menambahkan bantalan 5 unit ke konten di dalam anak
item.
Langkah 2: Verifikasi Keluaran
Untuk memastikan bahwa breakpoint dan kueri media telah diterapkan pada kisi baris, lihat halaman web HTML dengan mengubah ukuran layar:
Pada output di atas, terlihat bahwa jumlah baris berubah sesuai ukuran layar. Ini menunjukkan bahwa titik henti sementara dan kueri media telah berhasil diterapkan pada kisi baris.
Kesimpulan
Untuk menerapkan titik henti sementara dan kueri media pada petak baris di Tailwind, tentukan jumlah baris untuk berbagai ukuran layar menggunakan tombol “ sm ”, “ md ' atau ' lg ” breakpoint dengan “ kisi-baris-
' keperluan. Kemudian, pastikan perubahan pada halaman web dengan mengubah ukuran layar. Artikel ini telah mencontohkan metode untuk menerapkan breakpoint dan kueri media pada petak baris di Tailwind CSS.