Responsivní bento grid: Od desktopů k mobilům

Proč je responsivita u bento gridu složitá

Bento grid je krásný na desktopu. Asymetrické dlaždice různých velikostí vytvářejí vizuální dynamiku, kterou čistě symetrické mřížky nedokážou. Ale když se obrazovka zmenší? To je úplně jiný příběh. Na mobilu nemůžete jednoduše stisknout všechno do jednoho sloupce. Musíte si myslet na to, jak se každý prvek skládá, jak se texty zalamují, a jak to všechno vypadá při třech různých šířkách obrazovky.

Správná responsivita není o tom koukat na design v DevTools. Je to o tom, že se design adaptuje přirozeně. Flexbox a CSS Grid nám dají nástroje, ale je na nás, abychom je správně použili. Tohle je praktická příručka — ne teorie, ale konkrétní CSS kód, který funguje.

Základní struktura — jak začít

Nejdřív si ujasníme, jak vypadá bento grid v HTML. Máte kontejner (obvykle grid-container ) s několika item prvky. Každý prvek má svou velikost — něco na 2 řádky, něco na 3 sloupce. Na desktopu to vypadá skvěle. Ale co se děje na tabletu? Co na telefonu?

Flexbox je zde váš přítel. Zatímco CSS Grid je skvělý pro přesnější kontrolu, flexbox vám dá více flexibility (pardon) pro responsivní chování. Můžete nastavit flex-basis a nechat položky, aby se přirozeně přizpůsobily dostupnému místu.

.bento-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.bento-item {
    flex: 1 1 calc(50% - 1rem);
    min-height: 250px;
}

Tímto si říkáte: “Každá položka má být minimálně 50% šířky, ale pokud zbyde místo, můžeš se rozšířit.” Na tabletu se budou dva prvky vejít do řádku. Na telefonu? Jen jeden. Jednoduché, ale efektivní.

Breakpointy, které mají smysl

Zde je chyba, kterou dělá spoustu lidí: používají jen max-width: 768px a max-width: 1024px . Ale bento grid potřebuje více jemnosti. Máte mobily o šířce 375px, starší tablety na 600px, iPady na 810px, a pak desktopy od 1200px výše.

Proč tolik breakpointů? Protože bento grid se skládá z různě velkých prvků. Pokud máte prvek, který je na desktopu 3×3 čtverce, na tabletu by měl být 2×2, a na mobilu jednoduše jeden řádek. Musíte to všechno naplánovat.

CSS Grid nebo Flexbox? Odpověď je…

Zajímavá otázka. CSS Grid vám dá absolutní kontrolu — můžete přesně říci “tato položka zabírá 3. až 5. sloupec.” Ale na mobilu musíte tu kontrolu vzít zpátky. Flexbox je demokratičtější. Říkáte “mám tenhle prostor, rozděl si ho,” a prvky si samy najdou místo.

Pro bento grid? Flexbox. Naprostá převaha. Je předvídatelnější při změnách šířky a jednodušší se s ním pracuje na menších obrazovkách. Grid je skvělý, když máte velmi precizní layout, kterému se nevyhnete. Ale u bento? Flexbox vítězí.

Praktická implementace — kód, který funguje

Tady je, co skutečně potřebujete. Není to krásný a jednoduchý kód. Je to kód, který se chová správně na všech zařízeních.

.bento {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 auto;
}

.bento-item {
    flex: 1 1 100%;
    min-height: 250px;
}

@media (min-width: 600px) {
    .bento-item { flex-basis: calc(50% - 0.75rem); }
    .bento-item:nth-child(3n) { flex-basis: 100%; }
}

@media (min-width: 900px) {
    .bento-item { flex-basis: calc(33.33% - 1rem); }
    .bento-item:nth-child(3n+1) { flex-basis: calc(66.66% - 1rem); }
}

@media (min-width: 1200px) {
    .bento-item { flex-basis: calc(25% - 1.125rem); }
    .bento-item:nth-child(4n+1) { flex-basis: calc(50% - 1.125rem); }
    .bento-item:nth-child(5n+2) { flex-basis: calc(50% - 1.125rem); }
}

Co se tady děje? Na mobilu — všechno na 100%. Na tabletu — dva sloupce, ale každá třetí položka jde přes oba sloupce (pro vizuální rozmanitost). Na desktopech — více granularity, různé kombinace velikostí.

Chyby, kterým se vyhnout

Během let vidím stejné chyby pořád dokola. Pojďme je rozebrat, aby jste je neudělali.

Chyba 1: Příliš mnoho breakpointů. Někdo vytvoří breakpoint na každých 50 pixelů. To vás zbláhne a kód bude neudržovatelný. Čtyři až pět dobře umístěných breakpointů stačí.

Chyba 2: Zapomenutí na gap. Když počítáte flex-basis, musíte počítat s mezerou. calc(50% - 0.75rem) není stejné jako 50% . Ten “minus” je důležitý.

Chyba 3: Ignorování obrázků. Bento grid často obsahuje obrázky. Pokud neustavíte max-width: 100% na obrázcích, budou převyšovat jejich kontejnery. To je selhání responsivity.

Jak testovat a ladit

Není to o tom koukat na náhled v DevTools. Otevřete si skutečný telefon. Nebo aspoň zkuste několik různých šířek — 375px, 600px, 900px, 1440px. Vidíte nějaké děravé okraje? Něco se překrývá? Texty jsou nečitelné?

Použijte Chrome DevTools, ale nekončete tam. Otestujte na Safariu, na Firefoxu. Mobilní prohlížeče se chování někdy liší. A především si všimněte, jak se obsah skládá. Je to přirozené? Nebo vidíte hrany, která vypadají divně?

Bento grid na responzivních zařízeních není jednoduché. Ale když si osvojíte základy — flexbox, správné breakpointy, a trochu matematiky s gap — tak se vám to bude dařit. A design bude vypadat skvěle na všem, od malého iPhonu až po 32″ monitor.