Ovaj će članak prikazati primjer metode za primjenu prijelomnih točaka i medijskih upita na rešetku redaka u Tailwind CSS-u.
Kako primijeniti prijelomne točke i medijske upite na rešetku redaka u Tailwindu?
Da biste primijenili prijelomne točke i medijske upite na rešetku redaka u Tailwindu, napravite HTML program. Zatim odredite broj redaka za različite veličine zaslona koristeći ' sm ”, “ doktor medicine ' ili ' lg ' prijelomne točke s ' grid-rows-
Istražimo praktičnu primjenu:
Korak 1: Koristite prijelomne točke i medijske upite s rešetkom redaka u HTML programu
Napravite HTML program i definirajte broj redaka za različite veličine zaslona s ' grid-rows-
< tijelo >
< div razreda = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div razreda = 'bg-teal-500 p-5' > 1 < / div >
< div razreda = 'bg-teal-500 p-5' > 2 < / div >
< div razreda = 'bg-teal-500 p-5' > 3 < / div >
< div razreda = 'bg-teal-500 p-5' > 4 < / div >
< div razreda = 'bg-teal-500 p-5' > 5 < / div >
< div razreda = 'bg-teal-500 p-5' > 6 < / div >
< div razreda = 'bg-teal-500 p-5' > 7 < / div >
< div razreda = 'bg-teal-500 p-5' > 8 < / div >
< div razreda = 'bg-teal-500 p-5' > 9 < / div >
< div razreda = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / tijelo >
Ovdje:
- “ rešetka ” klasa se koristi za stvaranje rasporeda mreže.
- “ rešetka-redovi-2 ” klasa navodi da rešetka treba imati 2 retka jednake veličine.
- “ md:grid-rows-3 ” klasa mijenja rešetku u 3 retka jednake veličine na zaslonu srednje veličine.
- “ lg:grid-rows-5 ” klasa mijenja rešetku u 5 redova jednake veličine na velikom zaslonu.
- “ grid-flow-col ” klasa postavlja rešetkaste stavke vodoravno u stupce.
- “ praznina-3 ” klasa postavlja razmak od 3 jedinice između svake stavke mreže.
- “ m-3 ” klasa primjenjuje marginu od 3 jedinice oko spremnika mreže.
- “ tekst-centar ” klasa postavlja tekst svake stavke mreže u središte.
- “ bg-teal-500 ” klasa postavlja plavozelenu boju na pozadinu mrežnih stavki.
- “ p-5 ” klasa dodaje ispunu od 5 jedinica sadržaju unutar djeteta
stavke.
Korak 2: Provjerite izlaz
Kako biste bili sigurni da su prijelomne točke i medijski upiti primijenjeni na rešetku redaka, pregledajte HTML web stranicu promjenom veličine zaslona:
U gornjem izlazu može se vidjeti da se broj redaka mijenja s veličinom zaslona. Ovo označava da su prijelomne točke i medijski upiti uspješno primijenjeni na rešetku retka.
Zaključak
Da biste primijenili prijelomne točke i medijske upite na rešetku redaka u Tailwindu, definirajte broj redaka za različite veličine zaslona pomoću ' sm ”, “ doktor medicine ' ili ' lg ' prijelomne točke s ' grid-rows-
” komunalije. Zatim osigurajte promjene na web stranici promjenom veličine zaslona. Ovaj je članak pokazao primjer metode za primjenu prijelomnih točaka i medijskih upita na rešetku redaka u Tailwind CSS-u.