Šiame straipsnyje bus parodytas lūžio taškų ir medijos užklausų taikymo Tailwind CSS eilučių tinklelio metodas.
Kaip taikyti lūžio taškus ir medijos užklausas eilučių tinklelyje sistemoje Tailwind?
Norėdami pritaikyti lūžio taškus ir medijos užklausas eilučių tinklelyje programoje Tailwind, sukurkite HTML programą. Tada nustatykite įvairių ekrano dydžių eilučių skaičių naudodami „ sm “, „ md “ arba „ lg ' pertraukos taškai su ' grid-rows-
Panagrinėkime praktinį įgyvendinimą:
1 veiksmas: naudokite lūžio taškus ir medijos užklausas su eilučių tinkleliu HTML programoje
Sukurkite HTML programą ir nustatykite skirtingų ekrano dydžių eilučių skaičių naudodami „ grid-rows-
< kūnas >
< div klasė = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div klasė = 'bg-teal-500 p-5' > 1 < / div >
< div klasė = 'bg-teal-500 p-5' > 2 < / div >
< div klasė = 'bg-teal-500 p-5' > 3 < / div >
< div klasė = 'bg-teal-500 p-5' > 4 < / div >
< div klasė = 'bg-teal-500 p-5' > 5 < / div >
< div klasė = 'bg-teal-500 p-5' > 6 < / div >
< div klasė = 'bg-teal-500 p-5' > 7 < / div >
< div klasė = 'bg-teal-500 p-5' > 8 < / div >
< div klasė = 'bg-teal-500 p-5' > 9 < / div >
< div klasė = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / kūnas >
Čia:
- “ tinklelis “ klasė naudojama tinklelio išdėstymui sukurti.
- “ tinklelis-eilės-2 “ klasė nurodo, kad tinklelyje turi būti 2 vienodo dydžio eilutės.
- “ md:grid-rows-3 “ klasė pakeičia tinklelį į 3 vienodo dydžio eilutes vidutinio dydžio ekrane.
- “ lg:grid-rows-5 “ klasė pakeičia tinklelį į 5 vienodo dydžio eilutes dideliame ekrane.
- “ grid-flow-col “ klasė tinklelio elementus deda horizontaliai į stulpelius.
- “ tarpas-3 ” klasė nustato 3 vienetų atstumą tarp kiekvieno tinklelio elemento.
- “ m-3 ” klasė aplink tinklelio konteinerį taiko 3 vienetų paraštę.
- “ teksto centras “ klasė nustato kiekvieno tinklelio elemento tekstą į centrą.
- “ bg-teal-500 “ klasė nustato melsvą spalvą tinklelio elementų fone.
- “ p-5 “ klasė vaiko viduje esantį turinį papildo 5 vienetais
daiktų.
2 veiksmas: patikrinkite išvestį
Norėdami įsitikinti, kad lūžio taškai ir medijos užklausos buvo pritaikytos eilučių tinklelyje, peržiūrėkite HTML tinklalapį pakeisdami ekrano dydį:
Aukščiau pateiktame išvestyje matyti, kad eilučių skaičius kinta priklausomai nuo ekrano dydžio. Tai rodo, kad lūžio taškai ir medijos užklausos buvo sėkmingai pritaikytos eilučių tinklelyje.
Išvada
Norėdami pritaikyti lūžio taškus ir medijos užklausas eilučių tinklelyje programoje Tailwind, nustatykite įvairių ekrano dydžių eilučių skaičių naudodami „ sm “, „ md “ arba „ lg ' pertraukos taškai su ' grid-rows-
' Komunalinės paslaugos. Tada užtikrinkite pakeitimus tinklalapyje pakeisdami ekrano dydį. Šiame straipsnyje parodytas lūžio taškų ir medijos užklausų taikymo Tailwind CSS eilučių tinklelio metodas.