Tento článok bude príkladom metódy použitia bodov prerušenia a mediálnych dopytov na mriežku riadkov v CSS Tailwind.
Ako použiť body prerušenia a mediálne dotazy na mriežku riadkov v Tailwinde?
Ak chcete použiť body prerušenia a mediálne dotazy na mriežku riadkov v Tailwinde, vytvorte program HTML. Potom definujte počet riadkov pre rôzne veľkosti obrazovky pomocou „ sm “, “ md “ alebo „ lg ” prerušovacie body s “ grid-rows-
Pozrime sa na praktickú implementáciu:
Krok 1: Použite body prerušenia a mediálne dotazy s mriežkou riadkov v programe HTML
Vytvorte HTML program a definujte počet riadkov pre rôzne veľkosti obrazovky pomocou „ grid-rows-
< telo >
< div trieda = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div trieda = 'bg-teal-500 p-5' > 1 < / div >
< div trieda = 'bg-teal-500 p-5' > 2 < / div >
< div trieda = 'bg-teal-500 p-5' > 3 < / div >
< div trieda = 'bg-teal-500 p-5' > 4 < / div >
< div trieda = 'bg-teal-500 p-5' > 5 < / div >
< div trieda = 'bg-teal-500 p-5' > 6 < / div >
< div trieda = 'bg-teal-500 p-5' > 7 < / div >
< div trieda = 'bg-teal-500 p-5' > 8 < / div >
< div trieda = 'bg-teal-500 p-5' > 9 < / div >
< div trieda = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / telo >
Tu:
- “ mriežka ” sa používa na vytvorenie rozloženia mriežky.
- “ grid-rows-2 ” trieda určuje, že mriežka by mala mať 2 rovnako veľké riadky.
- “ md:grid-rows-3 ” zmení mriežku na 3 rovnako veľké riadky na strednej veľkosti obrazovky.
- “ lg:grid-rows-5 ” zmení mriežku na 5 rovnako veľkých riadkov na veľkej obrazovke.
- “ grid-flow-col ” trieda umiestňuje položky mriežky vodorovne do stĺpcov.
- “ medzera-3 ” trieda nastavuje vzdialenosť 3 jednotiek medzi každou mriežkou.
- “ m-3 ” trieda aplikuje okraj 3 jednotiek okolo mriežkového kontajnera.
- “ textové centrum ” nastaví text každej položky mriežky na stred.
- “ bg-teal-500 ” nastaví modrozelenú farbu na pozadie položiek mriežky.
- “ p-5 “ trieda pridáva k obsahu vo vnútri dieťaťa výplň 5 jednotiek
položky.
Krok 2: Overte výstup
Aby ste sa uistili, že body prerušenia a mediálne dotazy boli použité v mriežke riadkov, zobrazte webovú stránku HTML zmenou veľkosti obrazovky:
Vo vyššie uvedenom výstupe je vidieť, že počet riadkov sa mení s veľkosťou obrazovky. To znamená, že body prerušenia a mediálne dotazy boli úspešne aplikované na mriežku riadkov.
Záver
Ak chcete použiť body prerušenia a mediálne dopyty na mriežku riadkov v Tailwinde, definujte počet riadkov pre rôzne veľkosti obrazovky pomocou „ sm “, “ md “ alebo „ lg ” prerušovacie body s “ grid-rows-
” komunálne služby. Potom zaistite zmeny na webovej stránke zmenou veľkosti obrazovky. Tento článok je príkladom metódy na použitie bodov prerušenia a mediálnych dopytov na mriežku riadkov v CSS Tailwind.