3 rovnaké stĺpce Rozloženie mriežky CSS
Vizuálne navrhnite rozloženia mriežky CSS: nastavte stĺpce, riadky a medzery, potom zadajte názvy oblastí do buniek a vytvorte oblasti mriežky-šablóny – so živým náhľadom a kopírovateľnými CSS a HTML.
Výsledok
Táto stránka otvorí generátor mriežky nastavený na tri stĺpce rovnakej šírky v jednom riadku, pričom pomenované oblasti sú vypnuté – rozloženie je len repeat(3, 1fr), čo je najkratší spôsob, ako povedať „tri stĺpce, ktoré vždy rovnomerne rozdelia dostupnú šírku“.
Stĺpce s rovnakou šírkou sú ťahúňom mriežok kariet, cenových tabuliek a obrázkových galérií: žiadna oblasť nepotrebuje pomenovanie, pretože každý stĺpec hrá rovnakú úlohu, takže veľkosť obyčajnej stopy je jasnejšia ako deklarácia oblastí mriežky-šablóny-oblasti. Pridajte riadok a pod ním sa zopakujú tri rovnaké skladby, stále dokonale rovnomerné.
Zvýšte počet stĺpcov pre hustejšiu mriežku alebo zapnite pomenované oblasti, ak je potrebné, aby neskorší stĺpec vyčnieval od ostatných – CSS a HTML nižšie sa aktualizujú hneď, ako to urobíte. Všetko beží na strane klienta, takže nie je čo nahrávať a na čo čakať.