Naučte se používat mřížky CSS pro snadné vytváření složitých rozvržení.

Umístění prvků na webové stránce může být při práci se složitými rozvrženími velmi komplikované. Zde se hodí mřížka CSS. Jedná se o dispoziční systém navržený tak, aby zjednodušil proces vytváření složitých layoutů.

Jak vám to pomáhá? Na rozdíl od tradičních metod rozvržení, které umožňují umístit prvky pouze do řádků nebo sloupců, vám mřížka CSS nabízí to nejlepší z obou světů – 2D přístup využívající řádky a sloupce.

Mřížkové kontejnery a položky

Vlastnosti mřížky CSS můžete použít na dva hlavní typy prvků: nadřazené a podřízené prvky. Když nastavíte vlastnost display na "grid" pro nadřazený prvek, přemění tento prvek na kontejner mřížky. Jakýkoli podřízený prvek v tomto kontejneru mřížky se stane položkou mřížky, která zdědí použité vlastnosti mřížky.

Zde je znázorněno:

Položka mřížky se také může stát kontejnerem mřížky. Nyní můžete rozvržení označit jako vnořenou mřížku – mřížku v mřížce. Kontejner hlavní mřížky je nyní označován jako vnější mřížka, zatímco kontejner s mřížkou se stává vnitřní mřížkou.

instagram viewer

Každá z těchto mřížek funguje nezávisle na druhé, což znamená, že vlastnosti nastavené pro vnitřní mřížku neovlivňují rozložení vnější mřížky a naopak.

Vypadá to takto:

Zvládnutí vztahu mezi mřížkovými kontejnery a položkami je zásadní pro budování dvourozměrných dispozic účinně.

Mějte na paměti, že existují vlastnosti mřížky pro kontejnery mřížky, zatímco jiné jsou pro položky mřížky.

Mřížkové čáry a stopy

Než začnete používat mřížku CSS, měli byste znát dva klíčové pojmy:

  1. Čáry mřížky: Čáry mřížky označují vodorovné a svislé čáry, které tvoří mřížku v rozložení mřížky CSS. Určují počáteční a koncové body řádků a sloupců, což pomáhá uspořádat, kde se věci na mřížce pohybují. Tyto čáry jsou jako okraje krabic; mají čísla, která vám pomohou odkazovat na prvky při umisťování. Zde je představuje červená přerušovaná čára:
  2. Dráhy mřížky: Jsou to mezery mezi čarami mřížky, které definují řádky a sloupce. Jsou jako stavební kameny rozložení mřížky. Na obrázku výše barevná oblast v každé položce představuje dráhu mřížky.

Představte si čáry mřížky a stopy jako stavební kameny rozvržení mřížky, jako jsou čáry na listu milimetrového papíru. Když se horizontální čára mřížky protne s čárou vertikální mřížky, vytvoří buňku ve tvaru krabice. Tyto buňky fungují jako kontejnery, kam můžete umístit položky mřížky.

Vlastnosti kontejneru CSS mřížky

Toto jsou vlastnosti, které můžete použít na kontejner mřížky, abyste uspořádali rozvržení a pomohli při umísťování prvků v něm. Jak již bylo zmíněno dříve, jednou z nich je vlastnost display nastavená na grid. Zde jsou další:

Šablona mřížky

Tato vlastnost definuje velikost řádků a sloupců. Velikost těchto vlastností můžete nastavit pomocí pixelů, procent nebo zlomkových jednotek (fr). Můžete také použít klíčová slova jako auto, minmax(), a opakovat() zvýšit flexibilitu.

  • grid-template-rows: Nastaví výšky řádků.
  • mřížka-šablona-sloupce: Definuje šířky sloupců.

Zde jsou nějaké příklady:

Použití pixelů:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Použití procent:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Pomocí fr:

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

Použití klíčových slov auto a minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Použití repeat() pro konzistentní velikost:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automatické umístění a oblasti šablon mřížky

Automatické umístění: Automatické umístění je jako nechat mřížku rozhodnout, kam položky umístit. Pokud neurčíte přesné pozice, mřížka automaticky umístí položky v pořadí, v jakém se objeví v označení. To je užitečné, když máte mnoho položek a chcete, aby vyplnily mřížku rovnoměrně.

Oblasti šablony mřížky: Oblasti šablony mřížky si představte jako vytváření rozvržení pomocí pojmenovaných zón. Je to jako pojmenování místností na půdorysu. Při umísťování položek mřížky se můžete odvolávat na tyto názvy oblastí. Například:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Toto rozložení je jako mřížka se třemi sloupci a čtyřmi řádky. Oblast hlavního obsahu má dva řádky. Mezi označené oblasti patří „záhlaví“, „postranní panel“, „obsah“ a „zápatí“. V dalších částech se naučíte používat tyto popisky oblastí ve vlastnostech každé položky mřížky.

Zarovnání v mřížce CSS

Vlastnosti zarovnání můžete použít k ovládání umístění položek mřížky v jejich buňkách mřížky. Vlastnosti jsou:

  • zarovnat-položky: Řídí vodorovné zarovnání položek v jejich buňce mřížky.
    • Hodnoty: začátek, konec, střed a úsek.
  • zarovnat-položky: Řídí vertikální zarovnání položek v jejich buňce mřížky.
    • Hodnoty: začátek, konec, střed a úsek.
  • ospravedlnit-obsah: Zarovná celou mřížku v kontejneru podél vodorovné osy.
    • Hodnoty: začátek, konec, střed, úsek, mezera-mezi, mezera-kolem a prostor-rovnoměrně.
  • zarovnat-obsah: Zarovná celou mřížku v kontejneru podél svislé osy.
    • Hodnoty: začátek, konec, střed, úsek, mezera-mezi, mezera-kolem a prostor-rovnoměrně.

Zde je příklad:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

V tomto příkladu budou položky ve svých buňkách vycentrovány vodorovně i svisle. Prostor bude rovnoměrně rozdělen mezi sloupce celé mřížky a mřížka bude v kontejneru svisle vycentrována.

Grid Gap

Mezera v mřížce označuje prostor mezi řádky a sloupci v rozložení mřížky. Pomáhá vytvářet vizuální oddělení a přidává určitý prostor mezi položky mřížky.

The grid-gap vlastnost umožňuje nastavit mezeru mezi řádky a sloupci. K jeho definování můžete použít různé jednotky, jako jsou pixely (px), procenta (%), jednotky em (em) a další.

.grid-container {
grid-gap: 20px;
}

V tomto příkladu má kontejner mřížky dva sloupce s mezerou 20 pixelů mezi nimi. Tato mezera vizuálně odděluje sloupce a zlepšuje rozložení.

Vlastnosti položky mřížky CSS

Zde jsou některé klíčové vlastnosti, které řídí chování jednotlivých položek mřížky v rozvržení mřížky CSS, spolu s příklady:

grid-row-start a grid-row-end:

  • Definuje počáteční a koncové řádky pro položku.
  • Hodnoty mohou být čísla řádků, "span n" nebo "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Tento kód umístí Položka mřížky 1 z řádku druhé řady do řádku čtvrté řady.

grid-column-start a grid-column-end:

  • Definuje počáteční a koncové řádky sloupce pro položku.
  • Hodnoty mohou být čísla řádků, "span n" nebo "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Tento kód umístí Položka mřížky 2 z prvního sloupcového řádku do třetího sloupcového řádku.

mřížková oblast:

  • Určuje velikost a polohu položky mřížky v mřížce odkazem na pojmenované čáry mřížky oblasti mřížky-šablony.
  • Jak již bylo zmíněno dříve, předdefinované názvy oblastí se již používají s oblasti mřížky-šablony vlastnictví. Zde je příklad, jak jej použít společně s mřížková oblast. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Zde je výsledek:

ospravedlnit se:

  • Zarovná jednotlivé položky vodorovně ve své buňce.
  • Hodnoty mohou být začátek, konec, střed a úsek. 
.grid-item-5 {
justify-self: center;
}

Tento kód vodorovně vycentruje Položka mřížky 5 ve své buňce.

zarovnat se:

  • Zarovnejte jednotlivé položky svisle v rámci své buňky.
  • Hodnoty mohou být začátek, konec, střed a úsek. 
.grid-item-1 {
align-self: end;
}

Tento kód se zarovná Položka mřížky 1 na dno své buňky.

Neváhejte kombinovat a přizpůsobovat tyto vlastnosti, abyste vytvořili požadované rozvržení a vzhled pro každou položku mřížky v mřížce CSS.

Vytváření responzivních rozvržení pomocí mřížek CSS

Použití mřížek CSS pro vytváření responzivních rozvržení je důležité zajistit, aby se vaše webová stránka bez problémů přizpůsobila různým velikostem obrazovky a zařízení. Můžete použít tyto metody:

  • Mediální dotazy: Můžete použít dotazy na média pro použití různých rozložení mřížky v závislosti na velikosti obrazovky. Možná budete muset například změnit uspořádání položek mřížky nebo upravit šířku sloupců pro menší obrazovky.
  • Flexibilní jednotky: Použijte relativní jednotky, jako jsou procenta a fr, abyste umožnili položkám mřížky a sloupcům přizpůsobit se proporcionálně dostupnému prostoru.
  • minmax(): Použijte minmax() funkce k určení rozsahu velikostí pro sloupce nebo řádky mřížky. Zajišťuje, že se položky nebudou na různých obrazovkách jevit jako příliš malé nebo příliš velké.

Nezapomeňte upravit sloupce a další prvky, jako jsou mezery mezi položkami mřížky, velikosti písma a okraje. Zajišťuje konzistentní a dobře navržené rozložení, které dobře funguje na různých zařízeních.

Prozkoumejte možnosti rozložení mřížky CSS

Přijetí flexibility a výkonu mřížky CSS vám umožní vytvářet rozvržení, která nejen skvěle vypadají, ale také se hladce přizpůsobí požadavkům moderního webdesignu. Ponořte se tedy do světa gridů, prozkoumejte možnosti a zdokonalte své dovednosti v oblasti vývoje webu.

Když se ponoříte do systémů rozvržení, možná budete chtít porovnat jiné metody rozvržení s mřížkami CSS. Můžete tak učinit pomocí modulu CSS Flexbox. To vám pomůže naučit se rozhodovat při práci na projektu.