Přesouvání položek v rozložení mřížky CSS [Průvodce]
Za použití CSS Grid Layout Module ve web designu se stává stále více a více proveditelné, jak více prohlížečů začít podporovat. Při vytváření rozvržení vyplňujících buňky mřížky by však mohlo dojít k okamžiku, kdy chcete dosáhnout složitějších věcí.
Můžete například chtít lehce se pohybujte některé položky mřížky uvízly v oblasti mřížky. Můžete také chtít přesuňte je z kontejneru mřížky (přetečení), nebo přes sebe (překrývají), nebo jen… k nějakému prázdnému prostoru kolem.
Takže v tomto příspěvku vám ukážu, jak můžete přesunout, objednat, přetečení, překrytí a velikost položek mřížky při použití modulu CSS Grid Layout Module.
Vytvořit mřížku CSS
Nejdříve vytvořme jednoduchou CSS mřížku jeden řádek a tři sloupce.
V HTML, vytvoříme spoustu divs, kde mřížka kontejner obsahuje tři položky mřížky.
V CSS, kontejner mřížky má displej: mřížka; vlastnictví a položky mřížky mít oblasti mřížky identifikuje názvy oblastí mřížky.
My také přidat oblasti šablony mřížek vlastnictví do kontejneru mřížky, ve kterém se používají názvy oblastí mřížky přidělte oblasti mřížky buňkám mřížky, které reprezentují.
Všechny sloupce mít velikost jednoho zlomku (fr) šířky kontejneru, což zajišťuje zadržení položek mřížky.
.grid-container zobrazení: mřížka; oblasti mřížkové šablony: „vlevo uprostřed vpravo“; sloupce mřížkové šablony: opakování (3, 1fr); grid-template-rows: 80px; grid-gap: 5px; šířka: 360px; barva pozadí: purpurová; .grid-left mřížková oblast: vlevo; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Přetečení položek mřížky
Můžete vytvořit položku mřížky přeplní kontejner mřížky pokud je to nutné pro rozvržení. Chcete-li dosáhnout efektu přetečení, stačí použít jinou velikost sloupce:
.grid-container zobrazení: mřížka; oblasti mřížkové šablony: „vlevo uprostřed vpravo“; sloupce mřížkové šablony: opakování (3, 150px); grid-gap: 5px;
součet velikosti sloupce a mezery je větší než šířka kontejneru, které způsobí, že položky mřížky přetékají do kontejneru.
Překrývání položek mřížky
A položka mřížky se může překrývat (zcela nebo částečně zakryté) další položku mřížky v následujících případech:
- Je nastavena tak, aby přesahovala (a přesahovala) buňku (buňky) jiné položky mřížky.
- Jeho velikost byla zvýšena, což způsobuje, že se překrývá s položkou v blízkosti mřížky.
- Je přesunuta na vrchol další položky mřížky.
O druhém a třetím případě budeme diskutovat později, v “Velikost” a “Stěhování” sekcí.
Nejprve se podívejme na první případ, kdy se jedná o položku mřížky přesahuje další.
Položka mřížky v centru má přes levé, tak jsou na obrazovce viditelné pouze dvě položky.
.grid-center grid-area: center; sloupec mřížky: 1/3;
sloupec mřížky a řádek mřížky vlastnosti přiřazení čar mřížky mezi nimiž musí sloupec nebo řádek sedět.
Na níže uvedeném diagramu můžete vidět, jak sloupec mřížky: 1/3 Pravidlo CSS funguje: středový sloupec rozpětí mezi čarami mřížky 1 a 3. Výsledkem je, že středový sloupec překrývá levý sloupec.
Přesunout položky mřížky
Tím myslím pohyb pohybování položek mírně kolem. Pokud chcete zcela přemístit položku do jiné buňky / oblasti mřížky, doporučuji aktualizovat kód pro vytvoření mřížky.
Pohyb po položkách mřížky je jednoduchý. Prostě používat okraj, přeměnit, nebo poloha: relativní; vlastnosti. Viz níže, jak se tyto položky přesouvají pomocí těchto vlastností.
Položky středové a pravé mřížky lze přesouvat (viz obrázek výše) následujícími způsoby:
1. Použití okraj
Záporné okraje zvětšují rozměry položek mřížky, zatímco kladné okraje je upravují. Pomocí kombinace obou, můžete slighlty pohybovat položky mřížky kolem.
.grid-center grid-area: center; okraj vlevo: -10px; pravý okraj: 10px; horní okraj: -10px; margin-bottom: 10px; .grid-right grid-area: right; margin-left: 10px; pravý okraj: -10px; horní okraj: -10px; margin-bottom: 10px;
2. Použití přeměnit
přeložit() Funkce CSS posouvá prvek podél osy x a y. Používá se společně s přeměnit vlastnost umožňuje změnit pozici položky mřížky.
.grid-center grid-area: center; transformace: přeložit (-10px, -10px); .grid-right grid-area: right; transformace: překlad (10px, -10px);
3. Použití pozice
Za použití poloha: relativní; pravidlo se zadaným horní, dno, vlevo, odjet, a že jo vlastnosti lze použít také pro pohyb po položkách mřížky.
.grid-center grid-area: center; poloha: relativní; dno: 10px; vpravo: 10px; .grid-right grid-area: right; poloha: relativní; dno: 10px; vlevo: 10px;
Objednat položky mřížky
Mřížkové položky jsou vykresleny na obrazovce v pořadí, ve kterém jsou uvedeny ve zdrojovém kódu HTML.
V předchozí části, když byla středová položka přesunuta doleva, byla prohlížečem umístěna v horní části levé položky. Stalo se to proto, že v HTML, Můžeme však změnit položky mřížky objednávky za použití Za použití Stejně jako v modulu CSS Grid Layout, změna pořadí prvků v HTML neovlivní rozložení mřížky, můžete také dát Pokud pro položku mřížky použijete automatické velikosti řádků nebo sloupců (pomocí Nezapomeňte, že v naší vzorové mřížce mají všechny tři sloupce jeden zlomek ( Zde změníme velikost levé položky za použití Zde změníme velikost levé položky za použití z-index nebo objednat Vlastnosti CSS.
z-index: 1; pravidlo vlevo má vyšší stohovací kontext.. grid-left grid-area: vlevo; z-index: 1;
Velikost položek mřížky
auto, fr, GR jednotek), zmenší se tak prostor pro sousední položku, která se rozrostla jen když uvedené položky nebyl dimenzován přeměnit nebo záporné rozpětí.fr) kontejneru mřížky. Podívejte se, jak vypadají všechny tři položky po změně velikosti levého disku dvěma různými způsoby.1. Velikost s
šířka a výškašířka a výška vlastnosti. V důsledku toho zůstává uvnitř kontejneru mřížky.
.grid-left grid-area: vlevo; šířka: 200px; výška: 90px;
2. Velikost
přeměnitpřeměnit vlastnictví. V důsledku toho přetéká kontejner a mřížka mezery také zmizí.
.grid-left grid-area: vlevo; transformace: scalex (1,8);
