Pokud Vzhůru dolů čtete pravidelně, už víte, že CSS Grid je možné v řadě případů použít i v Internet Exploreru.
Vděčíme za to nedávným změnám v Autoprefixeru, který se naučil generovat kód tak, abychom mohli používat i vlastnosti jako grid-gap
(mezera mezi buňkami) nebo grid-template-areas
(pojmenované oblasti).
O čem jsem ale zatím nepsal, jsou nové možnosti automatického umísťování prvků v mřížce. Autoplacement je další důležitá vlastnost Gridu. A Explorer, který stále používá minimálně desetina českých uživatelů, ji nativně neumí.
Související
Pojďme tradičně na příklad. Chceme layout 2 × 2. HTML kód vypadá takto:
<div class="container">
<p class="box">Box</p>
<p class="box">Box</p>
<p class="box">Box</p>
<p class="box">Box</p>
</div>
Díky automatickému umístění bude v moderních prohlížečích stačit definovat mřížku v CSS:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
Prvky se nám pěkně rozmístí. Jenže smůla, tohle nebude fungovat v Internet Exploreru.

Ale to je nepříjemné, automatické umístění v MSIE nefunguje
Existuje záchrana – Autoprefixer. Pro MSIE 10 a 11, ve kterých nějaká verze CSS Gridu funguje, nám přidá pseudotřídy:
.container > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.container > *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
…a tak dále.
Neřeší to všechno, ale máme tady o jeden silný důvod navíc použít CSS Grid.
Co potřebujete?
V předchozím textu jsem psal o podmínkách pro nastavení podpory MSIE. Stručně to zopakuji:
- Automatizaci
Gulp, Grunt, skripty v NPM nebo podobné nástroje, které umí využít Autoprefixer. - Zapnout podporu IE11
V Browserslist, seznamu podporovaných prohlížečů, je nutné specifikovat také IE 11, případně i desátou verzi. - Zapnout Grid a auto-umístění
Zavolat Autoprefixer s parametremgrid: 'autoplace'
, který zařídí podporu právě pro automatické umístění. Alternativa jsou komentáře přímo v CSS:/* autoprefixer grid: autoplace */
.
Hotové a funkční nastavení je například v Gulpfile.js mého demonstračního repozitáře.
Mimochodem, řešení v NPM skriptu tam zatím nefunguje. Stejně tak se mi nedaří zařídit podporu autoplacementu v Codepenu. Nevím proč. Pokud vy ano, napište mi, prosím.
Pozor na výjimky
Autoplacement rozhodně nefunguje ve všech použitích mřížky. Následuje seznam možných problémů, ale bude jich více.
- Nefunguje pro neznámý počet položek
Je možné tedy automatizace použít jen pro explicitní mřížky definované pomocígrid-template-*
vlastností, nikolivgrid-auto-*
. - Pozor na zpětné nasazení na starých projektech
Doporučení zní: Nechte grid vypnutý a pomocí CSS komentářů jej zapínejte pouze pro nové deklarace. - Neumí to repeat() v kombinaci a auto-fill, auto-fit
I když IE funkcirepeat()
zvládá, klíčová slovaauto-fill
aauto-fit
bohužel ne. - Vyberte si: Buď autoplacement nebo manuální umístění v gridu
V moderních prohlížečích lze obojí kombinovat, v IE bohužel ne. Buď tedy budete všechny prvky gridu umísťovat ručně (použijte vlastnostgrid-template-areas
v definici gridu) nebo automaticky (bez*-areas
). - Pozor na pseudoelementy
::before
a::after
uvnitř Gridu vám v IE rozbijí mřížku, to se vsaďte. - V Media Qeuries nelze změnit jen grid-gap
Namísto toho je Autoprefixeru potřeba znovu deklarovat explicitní mřížku pomocí vlastnostígrid-template-*
.
Více najdete v dokumentaci Autoprefixeru.
Celkově vzato je tohle pseudo-automatické umísťování prvků do mřížky spolu s možností použít oblasti (areas) a mezery (gap) moc fajn posun vpřed. Určitě tedy Grid vyzkoušejte.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?