Úvod do modulu CSS Grid Layout Module

Bylo to jednou tabulek, pak okraje a plováky, pak flexbox a teď mřížkaCSS vždy směřovala k novým a lepším způsobům, jak zmírnit stáří práce kódování webových rozvržení. CSS Grid Layout Model vytvořit a aktualizovat rozvržení podél dvou os: horizontální a vertikální, ovlivňuje jak šířku, tak výšku prvků.

Rozložení mřížky nezávisí na pozici prvků v značce, proto můžete zamíchejte umístění prvků v označení bez změny rozložení. V modelu mřížky je prvek mřížkového kontejneru rozděleny do sloupců a řádků (souhrnně známé jako. \ t mřížkové stopy) by čáry mřížky. Podívejme se, jak na to vytvořit vzorovou mřížku.

Podpora prohlížeče

Jak psát tento článek, CSS Grid Module je podporován pouze nejnovější IE prohlížeč a Edge. CSS Grid je v experimentální fázi v ostatních velkých prohlížečích, ve kterých musíte podporu povolit ručně:

• Firefox: Stiskněte Shift + F2, zadejte následující příkaz do vstupního panelu GCLI, který se objevil v dolní části prohlížeče: pref set layout.css.grid.enabled true.
• Chrome: Procházet chrome: // příznaky URL a povolit Funkce experimentální webové platformy.

Pravděpodobně bude podporovat všechny hlavní prohlížeče do poloviny roku 2017. \ t.

Vzorová mřížka

Na otočit prvek do kontejneru mřížky Můžeš použít jeden z těchto tří Zobrazit vlastnosti:

1. displej: mřížka; - prvek je převedena na kontejner blokové mřížky
2. zobrazení: inline-grid; - prvek je převedeny na kontejner inline mřížky
3. zobrazení: subgrid; - pokud je prvek položkou mřížky, je to převedena na subgrid ignoruje vlastnosti šablony rastru a mezery mezi mřížkami

Stejně jako tabulka se skládá z více buněk tabulky, mřížka je složené z více buněk mřížky. Položka mřížky je přiřazené sadě buněk mřížky který je souhrnně známý jako oblasti mřížky.

Vytvoříme mřížka s pěti sekcemi (plochy mřížky): horní, dolní, levý, pravý a středový. HTML se skládá z pět divs uvnitř kontejneru div.

 
 
Horní
 
Vlevo, odjet
 
centrum
 
Že jo
 
Dno
 
 

V CSS oblasti šablony mřížek vlastnictví definuje mřížku s různými oblastmi mřížky. V jeho hodnotě, řetězec představuje řádek mřížky a každý platný název v řetězci představuje sloupec. Na vytvořit prázdnou buňku mřížky musíte použít tečka (.) charakter v řetězci řádků.

názvy oblastí mřížky odkazují oblasti mřížky vlastnost jednotlivých položek mřížky.

 .grid-container width: 500px; výška: 500px; displej: mřížka; oblasti mřížkových šablon: "horní horní část horní části" "vlevo uprostřed vpravo" "spodní spodní dno";  .grid-top grid-area: top;  .grid-bottom mřížka: spodní;  .grid-left mřížková oblast: vlevo;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Takže tento kód vytvoří mřížka se třemi řádky a sloupci. horní položka zabírá oblast, která přesahuje tři sloupce v prvním řádku a dno položka přesahuje tři sloupce v posledním řádku. Každý z vlevo, odjet, centrum a že jo položek jeden sloupec ve středním řádku.

Teď musíme přiřadit rozměry na tyto řádky a sloupce. sloupce mřížkové šablony a řádky šablony mřížky vlastnosti definovat velikost dráhy mřížky (řádek nebo sloupec).

 .grid-container width: 500px; výška: 500px; displej: mřížka; oblasti mřížkových šablon: "horní horní část horní části" "vlevo uprostřed vpravo" "spodní spodní dno"; sloupce mřížkové šablony: 100px auto 100px; řádky mřížkové šablony: 50px auto 150px;  

Takto vypadá naše CSS mřížka (s některými dalšími styly):

Prostor mezi položkami mřížky

Můžeš přidat mezeru mezi sloupci a řádky použitím mezera mezi mřížkou a sloupcem a mezera mezi mřížkami, nebo jejich dlouhodobé vlastnictví mezera sítě.

 .grid-container width: 500px; výška: 500px; displej: mřížka; oblasti mřížkových šablon: "horní horní část horní části" "vlevo uprostřed vpravo" "spodní spodní dno"; sloupce mřížkové šablony: 100px auto 100px; řádky mřížkové šablony: 50px auto 150px; grid-gap: 5px 5px;  

Níže vidíte, že mezera sítě Vlastnost přidala mezery mezi položkami mřížky.

Zarovnat obsah mřížky a položky

obsah vlastnictví kontejneru mřížky (.kontejner) zarovná obsah mřížky podél osy inline (horizontální osa) a majetku zarovnat obsah, zarovná obsah mřížky podél osy bloku (svislá osa). Obě vlastnosti může mít jednu z těchto hodnot: Start, konec, centrum, mezi nimi, prostor-kolem a prostor rovnoměrně.

Kde je to vhodné, velikost tratě (řádek nebo sloupec) se zmenší, aby se vešly do obsahu při zarovnání. Podívejte se na screenshoty obsahu mřížky s různými hodnotami níže.

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: mezer mezi;

justify-content: prostor-kolem;

justify-content: rovnoměrný prostor;

align-content: start;

align-content: end;

align-content: center;

align-content: mezer mezi;

align-content: space-around;

zarovnat obsah: rovnoměrný prostor;

Oba obsah a zarovnat obsah vlastnosti zarovnat celý obsah v rámci mřížky.

Na sjednotit jednotlivé položky v oblastech mřížky, používat další pár vlastností zarovnání: ospravedlnit-položky a zarovnat položky. Obě mohou mít jednu z těchto hodnot: Start, konec, centrum, základní linie (zarovnat položky podél základní čáry mřížky oblasti) a protáhnout se (položky vyplňují celou oblast).