Domovská » Kódování » Přesouvání položek v rozložení mřížky CSS [Průvodce]

    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 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:

    1. Je nastavena tak, aby přesahovala (a přesahovala) buňku (buňky) jiné položky mřížky.
    2. Jeho velikost byla zvýšena, což způsobuje, že se překrývá s položkou v blízkosti mřížky.
    3. 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,

    příjde potom
    , proto je středová položka vykreslen po (a znovu) vlevo.

    Můžeme však změnit položky mřížky objednávky za použití z-index nebo objednat Vlastnosti CSS.

    Za použití z-index: 1; pravidlo vlevo má vyšší stohovací kontext.

    . grid-left grid-area: vlevo; z-index: 1;  

    Stejně jako v modulu CSS Grid Layout, změna pořadí prvků v HTML neovlivní rozložení mřížky, můžete také dát

    před
    v HTML. Udělejte to pouze v případě, že aktualizovaný kód HTML nepoškodí přístupnost.

    Velikost položek mřížky

    Pokud pro položku mřížky použijete automatické velikosti řádků nebo sloupců (pomocí 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í.

    Nezapomeňte, že v naší vzorové mřížce mají všechny tři sloupce jeden zlomek (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

    Zde změníme velikost levé položky za použití šíř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ěnit

    Zde změníme velikost levé položky za použití př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);  
    © Savtec
    Užitečné informace a tipy pro vývoj webových aplikací. Programování, webdesign, CSS, HTML, JAVASCRIPT. Nakonfigurujte a znovu nainstalujte Windows. Vytváření webů a aplikací od nuly.