CSS grid: Explicitní a implicitní mřížka

Kromě výslovně uvedené explicitní mřížky existuje v CSS gridu ještě implicitní mřížka.

V naprosté většině případů definujeme explicitní mřížku, tedy předem uvedenou.

Může se nám ale stát, že položku umístíme na místo, kam explicitní mřížka nesahá. V takovém případě se nám mřížka automaticky rozšíří o implicitní část. Budete se divit, ale i tu můžeme předem definovat.

Podívejme se, pomocí kterých CSS vlastností můžeme obě mřížky definovat:

• Explicitní mřížku, výslovně definovanou, lze nastavit vlastnostmi obsahujícími slovo template:
  Jde konkrétně o grid-template-* – grid-template-rows, grid-template-columns a grid-template-areas.
• Implicitní mřížku, která obvykle není předem definovaná k vykreslení, můžete nastavit vlastnostmi obsahujícími slovo auto:
  Konkrétně uspějete s grid-auto-* – grid-auto-rows, grid-auto-columns a grid-auto-flow.

Příklad s přidáním položky na novou řádku

Jak už jsem psal, v naprosté většině případů definujeme mřížku jako explicitní. Vezměme třeba tento jednoduchoučký kód:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

V CSS pak layout rozdělíme do tří sloupců, které se spravedlivě dělí o prostor:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Co se ale stane, když do DOMu přidáme čtvrtou položku?

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item item--x">X</div>
</div>

Přidá se jako čtvrtá položka vedle třetí? Co myslíte?

Samozřejmě, že ne. Vždyť jsme prohlížeči výslovně (explicitně) řekli, že chceme třísloupcový layout.

V takovém případě se layout zalomí a přidá se nový řádek. Ale počkat – vždyť jsme žádné řádky nedefinovali! Tohle je přesně místo v textu, kde na scénu přichází implicitní grid.

Už víte, že implicitní layout definují vlastnosti grid-auto-rows, grid-auto-columns, které mají výchozí hodnotu auto. To neznamená nic jiného než: „Přidávej směle nové řádky (nebo sloupce, pokud má layout opačný směr) a nic dalšího neřeš, nazdar.“

Pokud bychom si ale přáli jiné parametry pro potenciální nové prvky mřížky, můžeme to prostě definovat:

.container {
  grid-auto-rows: 1fr 2fr;
}

Mřížce tím nepřikazujeme, aby byla rovnou dvouřádková. Říkáme zhruba toto: „Zatím nic nevykresluj, ale pokud by náhodou přibyla položka na druhou řádku, vykresli ji dvakrát tak vysokou, než jsou ty na prvním řádku.“ Tak tohle je ten slavný implicitní grid. Vypadá to teď jako na obrázku.

CodePen: vrdl.in/w9ua1

Příklad s přidáním položky na neznámou pozici

Tentokrát budeme drsní a žádnou explicitní mřížku definovat nebudeme. Jdeme na to:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Ve stylech sice zapneme formátovací kontext mřížky, nějakou tu mezeru pomocí vlastnosti gap, ale tím to hasne:

.container {
  display: grid;
  gap: 10px;
}

Prohlížeč si řekne: „Hmm… grid! Ovšem pozor – nemá deklaraci layoutu, takže to prostě vypíšu pod sebe.“ A jak řekne, tak udělá:

Jenže přesně na to vývojář čeká a prohlížeč jde zaskočit přidáním čtvrté položky do kontejneru s tímto předpisem:

.item--new {
  grid-column: 5;
  grid-row: 2;
}

Prohlížeč: „No toto! Máme tam přeci jen tři sloupce a jeden řádek. A ty mi tady něco umísťuješ do pátého sloupce a druhého řádku!“

Naštěstí si ale náš milý prohlížeč vzpomene, že kromě explicitní mřížky jej učili ještě implicitní. Tedy, že tam, kde chybí explicitní buňky, může vyskládat ty implicitní:

Výchozí výška i šířka implicitních buněk je na hodnotě auto, takže se rozměry určí podle obsahu položky. No a když tam žádný není… nemůžeme se pak divit, že čtvrtý sloupec je užší než první tři a nový pátý. Nemá totiž žádný obsah. Mohli bychom to opravit přípravou implicitní mřížky, například takto:

.container {
  grid-auto-columns: 1fr;
}

Všechny nově přidané sloupečky by pak měly stejnou šířku.

CodePen: vrdl.in/1nyf0

Hotovo! Snad se vám díky těmto dvěma příkladům povedlo proniknout do konceptu implicitní a explicitní mřížky, který je pro chápání CSS gridu velmi důležitý.