Ujistěte se, že vaše rozvržení plně reagují pomocí alternativní měřicí jednotky.

Není to tak dávno, co jsme byli zcela odkázáni na používání procent pro šířky a výšky. Použití procent znamenalo, že vaše rozvržení a prvky mohou mít výšku a šířku na základě výřezu. Ale jak se moderní CSS stále vyvíjí, dostali jsme se do bodu, kdy by mohlo být dokonce dobrý nápad nepoužívat procenta.

Přečtěte si o běžných problémech, se kterými se můžete setkat při používání procent. Zjistěte také o moderních technikách CSS, které lze použít místo procent. Tyto techniky vám poskytnou stejný výsledek jako procenta bez jakýchkoliv nevýhod.

Velmi jednoduchý příklad mřížky

Chcete-li demonstrovat problém s jednotkami v procentech, zvažte toto rozvržení HTML:

<divtřída="kontejnermoje-mřížka">
 <divtřída="mřížka-položka">
div>
 <divtřída="mřížka-položka">
div>
div>

Vnější prvek je základní div kontejnerový prvek se dvěma div děti. Každé dítě má a mřížka-položka třída. K přeměně kontejneru na mřížku se dvěma sloupci (dvěma políčky) budeme muset použít následující kód CSS:

instagram viewer 
tělo {
barva pozadí: Černá;
zarovnat-položky: centrum;
ospravedlnit-obsah: flex-start;
}
.moje-mřížka {
Zobrazit: mřížka;
mřížka-šablona-sloupce: 50% 50%;
okraj: 3rem;
okraj: 2pxpevnýzlato;
vycpávka: 1rem;
}
.mřížka-položka {
okraj: 3pxpevnýzlato;
vycpávka: 10rem 0;
Pozadí: modrý;
}

Takže každý sloupec (položka mřížky) má barvu pozadí zlatou. Na nadřazené třídě kontejneru nastavíme mřížka-šablona-sloupec na 50 % pro každý sloupec. Výsledkem je, že obě pole zabírají 50 % celkové šířky prvku kontejneru.

Zde je výsledek:

S tímto zarovnáním jsou ale problémy. Za prvé, pokud jste se rozhodli přidat a mezera k mřížkovému rodiči, dítě by mohlo přetéct ze strany. Například pokud byste měli přidat mezera: 3px k .moje-mřížka blok v CSS, pak by rozložení vypadalo takto:

Jak můžete vidět na obrázku výše, pravá krabice se přesunula z kontejneru. Někdy si toho možná nevšimnete, protože vaše mezera je dostatečně malá, což vede k podivnému problému se zarovnáním. Ale pokud jste měli větší mezeru, pak je překrytí zcela zřejmé.

Kdykoli používáte procenta a přidáváte okraje nebo mezery, existuje velká šance, že zaznamenáte tyto druhy chyb. Proč ale k chybě dochází?

Je to proto, že každý sloupec je 50 % nadřazeného sloupce. Ve výše uvedeném příkladu máme 50 % plus 50 % plus mezeru (3px), která vytlačí krabici z kontejneru.

Všimněte si, že tato chyba se nevyskytuje pouze u 50-50. První sloupec můžete nastavit na 75 %, druhý sloupec na 25 % a chyba se bude stále vyskytovat. Proto musíte následující řešení používat častěji.

Řešení s dílčími hodnotami

Řešením je použití zlomkových hodnot namísto procent. Takže místo nastavení prvního sloupce na 75 % a druhého na 50 %, můžete nastavit první sloupec na 3fr a druhý sloupec na 1fr:

mřížka-šablona-sloupce: 3fr 1fr

To zachovává stejný poměr jako v prvním příkladu. Ale výhoda použití fr jednotky je, že využívají zlomek dostupného prostoru. V tomto případě první sloupec zabere tři části prostoru, zatímco druhý sloupec zabere jednu část, bez mezery.

Další výhodou použití frs oproti procentům – nebo jiným absolutní jednotky, jako je px nebo em— je, že je můžete kombinovat s pevnými hodnotami. Zde je příklad:

mřížka-šablona-sloupce: 1fr 10rem;

S výše uvedeným kódem získáte pevnou hodnotu, která se nikdy nemění bez ohledu na velikost obrazovky. Je to proto, že sloupec napravo zůstane vždy na 10rem, zatímco sloupec nalevo zabere zbývající místo (mínus mezera).

Někdy vám projde používání procent. Musíte je však používat chytrými způsoby, které se stále dokážou přizpůsobit situaci. Často to znamená spárovat je s fr hodnota.

Realističtější příklad

Představme si, že máte stránku, která obsahuje hlavní obsahovou oblast a vedlejší (pro související příspěvky). Oblast hlavního obsahu zabírá tři zlomky obrazovky, zatímco postranní zabírá zbývající prostor mínus mezera:

.kontejner {
šířka: 100%;
Zobrazit: mřížka;
mřížka-šablona-sloupce: 3fr 1fr;
mezera: 1.5rem;
}
.Kartu {
barva pozadí: #5A5A5A;
vycpávka: 10px;
okraj-dole: .5rem;
}

Zde je výsledek:

Obvykle byste postranní panel (nebo stranou) přesunuli do spodní (nebo horní) části stránky, jakmile se obrazovka příliš zúžila. To znamená nastavení dotazů na média, které vše naskládají na sebe, když výřez dosáhne určitého bodu přerušení.

Zde je návod, jak můžete vše naskládat do sloupce, když výřez dosáhne 55 em nebo méně:

@media(max. šířka: 55 em) {
.kontejner {
Zobrazit: flex;
flex-direction: sloupec;
 }
}

A výsledek bude vypadat nějak takto:

Nyní nechcete, aby každá karta zabírala šířku celého výřezu. Spíše by se karty měly zobrazovat vedle sebe. Nejlepší způsob, jak toho dosáhnout, je pomocí mřížek CSS. Ale místo nastavení pevných hodnot šířky (např. 50 %) pro sloupec šablony mřížky použijte opakovat() fungovat následovně:

.sidebar-grid {
Zobrazit: mřížka;
mřížka-šablona-sloupce: opakovat(automatické přizpůsobení, minmax(25rem, 1fr));
zarovnat-obsah: Start;
mezera: 2rem;
}

Tento CSS nastavuje minimální velikost 25rem a maximální velikost 1fr. Tento přístup je mnohem lepší než nastavení pevných šířek, protože se spoléhá na vnitřní dimenzování. Jinými slovy, umožňuje prohlížeči zjistit věci na základě dostupných parametrů.

Když nyní zmenšíte okno prohlížeče na určitou šířku, rámeček mřížky se automaticky znovu upraví na dva rámečky na řádek.

Když se obrazovka zmenší, klesne na jeden rámeček na řádek. Prohlížeč tedy naskládá vše na sebe. To vše se děje při změně velikosti okna. Můžete použít funkci prohlížeče jako Chrome DevTools, abyste pochopili, jak tento CSS fungujea jak změna velikosti oken změní rozložení.

Nejlepší na tom je, že k tomu, aby prvek reagoval, nepotřebujete žádný kontejnerový dotaz ani nic jiného. Jednoduše nastavte mřížku a použijte min-max() nastavit zlomkové hodnoty namísto pevných velikostí.

Zjistěte více o mřížce CSS

Pokud chcete být skvělí s CSS, musíte mít hluboké znalosti CSS Grids. Mřížky mohou být při dobrém použití docela výkonné. Pomocí mřížek můžete dosáhnout téměř jakéhokoli rozvržení, které chcete. To z něj dělá nepostradatelný nástroj v CSS.

Jedna věc, kterou je třeba mít na paměti při používání mřížek CSS, je zaměřit se na odezvu. Můžete také použít zlomkový přístup, abyste se vyhnuli případům kolizí mezi prvky. Nezapomeňte si osvojit CSS mřížky, protože styl rozvržení vám při vytváření webových stránek nesmírně pomůže.