Responsivní CSS mřížka

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

Článek původně vyšel na autorově webu Je čas.

Při vytváření webu, kde má být obsah vypsán v jednotlivých boxech ve více sloupcích, stojíme před dilematem ohledně určení ideální šířky boxů a počtu sloupců.

Naštěstí jde využít Media Queries a pro různé šířky viewportu (dostupná plocha prohlížeče, kde se zobrazuje samotná stránka) nastavit různý počet sloupců.

Idea je taková, že šířka boxů bude nastavená procentuálně a při snížení šířky okna pod určitou velikost se šířka boxu zvětší, což sníží počet sloupců. Umístění boxů vedle sebe zajistí obtékání.

preskladani

Jak ilustruje obrázek, při změně šířky se nejprve bude měnit šířka boxů, až se při šířce nastavené v @media změní počet sloupců.

Sloupců bude ve výchozí podobě pět (100 / 20 = 5).

.box {
  width: 20%;
  float: left;
}

Vyšší šířku při nižší šířce okna zajistíme potom pravidlem @media.

@media (max-width: 700px) {
  .box {width: 25%}
}
@media (max-width: 600px) {
  .box {width: 33.3333%}
}
@media (max-width: 450px) {
  .box {width: 50%}
}

Při šířce do 700 px se tedy zvýší šířka boxu na 25 %, což vytvoří místo 5 sloupců jen čtyří (100 / 25 = 4) a tak dále.

U hodnot šířky, které nejsou celé (např. 33.3333%), může nastat problém s přesným zaokrouhlením. Proto je vhodné šířku spočítat CSS vlastností calc. Podpora calc je od IE 9 a mimo starou Operu 12. Nefunkčnost v IE 8 a starších ale nemusí vadit, protože v takových Explorerech nefunguje ani @media a navíc se takovéto prohlížeče nevyskytují v mobilních zařízeních.

.box {
  width: 33.3333%; /* prohlížeč nezná calc */
  width: -webkit-calc(100% / 3); 
  width: calc(100% / 3)
}

Samostatná ukázka

Mezery mezi boxy

Výše uvedená ukázka je sice hezká, ale v praxi nejspíš budeme potřebovat mít mezi boxy mezeru, rámeček a podobně.

Mezeru je možné zajistit snížením procentuální šířky a použitím ubrané hodnoty do marginu. Na pixel přesného řešení tím ale nedocílíme – ukázka.

Další možnost je použít rámeček (border). Při přepnutí box modelu na border-box (okrajový = padding a rámeček se k šířce nepřičítá) lze dosáhnout uspokojivého výsledku – ukázka.

Poslední možnost je potom použít další vnořený element, což prakticky umožní si libovolně nastavovat cokoliv – ukázka.

Stejně tlustý rámeček

Na první pohled složitější je vytvoření dlaždic, kde jednotlivé prvky bude oddělovat vždy stejně silný rámeček.

ramecek

S využitím obalového elementu potom dosáhneme relativně rozumného kódu.

Živá ukázka

Pevná výška

Všechny výše uvedené ukázky mají nastavenou pevnou výšku. To je bohužel nutnost v případě, že chceme používat obtékání.

Speciální selektory

Pokud již zmíněné postupy a triky nestačí, zachrání nás CSS selektor nth-child a obdobné.

  • .polozka:nth-child(5n + 1) – každá pátá položka
  • .polozka:nth-child(5) ~ .polozka – každá položka následující po páté

Ukázka stejně tlustého rámečku u všech boxů s využitím nth-child selektoru.

Autor se webdesignu intensivněji věnuje od roku 2005. V poslední době se zabývá hlavně tvorbou responsivních webů a frontendem. Od roku 2013 o tom píše na webu jecas.cz.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 8

Přehled komentářů

Jirka pevná výška
Bohumil Jahoda Re: pevná výška
David Světlík Re: pevná výška
Bohumil Jahoda Re: pevná výška
Velda Vyšší šířka
Marťas table-cell
Bohumil Jahoda Re: table-cell
Varan A co flex-box? :-)
Zdroj: https://www.zdrojak.cz/?p=13550