CSS Grid v MSIE: Jde to. I s automatickým umísťováním do mřížky

Celý článek

Text vyšel původně na webu autora.

„Neumí to Explorer“ je na prvních devíti místech z 10 důvodů, proč lidé ještě na začátku roku 2019 nepoužívají CSS Grid. Ale do jaké míry je to pravda?

Možná víte, že něco z gridu v Exploreru funguje. A taky, že náš „nejoblíbenější“ prohlížeč nepodporuje důležité vlastnosti jako je grid-gap (mezera mezi buňkami), grid-template-areas (pojmenované oblasti) nebo třeba automatické umísťování prvků do mřížky.

Na vědomí se tímto dává, že díky zásadním aktualizacím v Autoprefixeru je možné první dvě vcelku pokojně začít používat ve všech prohlížečích. A automatické umísťování? Tak trochu jde taky. Ale to je složitější.

Jak fungují první dvě můžete prozkoumat v třísloupcovém demu na Codepen, podrobněji to najdete vysvětlené v článku CSS Grid v Internet Exploreru: Jde to! V tomto textu se podíváme na ono problematické automatické umísťování.

Autoplacement je důležitá vlastnost Gridu. A Explorer, který stále používá minimálně desetina českých uživatelů, ji nativně neumí.

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?

(Nastavení podpory MSIE jsem popsal podrobněji v základním článku, zde jen stručně.)

• 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-fitbohuž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.