CSS Grid v MSIE: Můžete mít i automatické umísťování do mřížky

Naposledy upraveno: 4. 3. 2019 – Autor: Martin Michálek

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.

PageSpeed Insights

Obrázek: 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 parametrem grid: '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í, nikoliv grid-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 funkci repeat() zvládá, klíčová slova auto-fill a auto-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 vlastnost grid-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