grid-template-areas vám umožňuje rozložit mřížku vizuálně pojmenováním oblastí, což činí složitá rozvržení stránek čitelnými a snadno přeskupitelnými responzivně.
{
: grid;
: fr;
: auto fr auto;
:
;
: ;
}
{ : header; }
{ : sidebar; }
{ : main; }
{ : footer; }
grid-template-areas ve stylu ASCII art je rozvržením — vidíte strukturu na první pohled a opakování názvu způsobí, že se oblast rozprostře přes buňky.
@media (max-width: 600px) {
.layout {
grid-template-columns: 1fr; /* single column */
grid-template-areas:
"header"
"main" /* main now ABOVE sidebar on mobile */
"sidebar"
"footer";
}
}
Chcete-li změnit celé rozvržení pro mobilní zařízení, stačí přepsat mapu oblastí — HTML a přiřazení grid-area zůstávají stejné. To je mnohem čistší než individuální repositionování jednotlivých prvků.
main jako prvního v DOM z důvodu přístupnosti, přesto zobrazení bočního panelu vizuálně v první řadě).Pojmenované oblasti mřížky dělají rozložení na úrovni stránky (záhlaví/boční panel/hlavní/zápatí) čitelná a triviálně responzivní — restrukturalizace je věcí editace ASCII mapy, ne přepojování pozic.
Jde o jednu z nejjasnějších a nejudržitelnějších technik rozvržení, které CSS nabízí.
Knihovna IT otázek k pohovoru s podrobnými odpověďmi — od Junior po Senior.
Přispět