Jak správně nakodovat grid

Použij flexbox, stačí do googlu zadat něco jako equal height grid, např. www.lottejackson.com/learning/an-equal-height-grid-using-flexbox

třeba pomůže
Responsivní CSS mřížka
Flexboxy

raddimm.xx:
V prípade, že je obsah generovaný automaticky, ide použiť float a clear podmienený rozlíšením – niečo ako Živá ukázka.

Za každou druhou, treťou a štvrtou bunkou existuje clear so špecifickou triedou. Aktivitu pravidla zariadia media deklarácie. Ide elegantne obohatiť o jednofarebné alebo jednoduché pozadie, ktoré sa bude tváriť vysoké ako najvyšší prvok v riadku.

Výhodou riešenia je vynikajúca podpora.

Nevýhodou je mierne zložitejšia štruktúra (predpokladám, že v praxi ide o nejaký generovaný výpis, takže hraje iba jednorázovú rolu dlhšieho kódu na serveri).

V prípade náročnejších požiadaviek ako napríklad zarovnanie tlačidiel do jednej línie podľa najdlhšieho textu ktorejkoľvek bunky v riadku už je nutné zvážiť iné riešenie (špecificky na toto by asi šlo spáchať zverstvo s horšou sémantikou alebo výrazne zložitejším kódom). S tabuľkovými hodnotami displayu v tomto prípade nejde dosť dobre pracovať, kvôli pevnej štruktúre riadkov a obtiažnej responzivite, takže zrejme ostáva už iba flexbox.

Tomáš123:
„V prípade, že je obsah generovaný automaticky, ide použiť float a clear podmienený rozlíšením – niečo ako Živá ukázka.“
Myslím, že není problém s clearováním, ale že chce mít ceny a buttony v jedné lince.

„Za každou druhou, treťou a štvrtou bunkou existuje clear so špecifickou triedou.“
To také není třeba. V daných rozlišeních mohou clearovat rovnou ty konkrétní elementy na začátku řádku. Přidané elementy jsou tam zcela navíc. Odpadá tím i složitější výpis na serveru, byť i tam to je o pár podmínkách.

Tomášeek:
„V daných rozlišeních mohou clearovat rovnou ty konkrétní elementy na začátku řádku.“
Áno, ďakujem za vylepšenie.

„Odpadá tím i složitější výpis na serveru, byť i tam to je o pár podmínkách.“
Nechať to na pseudotriedu :nth-child by zbytočne obmedzilo podporu. Triedy by šlo presunúť priamo ku elementom.

Tomáš123:
„Nechať to na pseudotriedu :nth-child by zbytočne obmedzilo podporu.“
Podporu čeho? Bavíme se o roce 2020? Podporu IE8? FF3?

Můžu se zeptat (nikterak jedovatě, ale naprosto vážně), kolik návtěvníků z IE8 na svých projektech eviduješ? Jsou nějací? A je to více než třeba desetina procenta?

Tomášeek:
Otázkou v tomto kontexte nie je či nejakí sú ani koľko ich je. Kladiem si otázku ako najlepšie riešiť daný problém. Pri hľadaní riešenia pochopiteľne prihliadam aj na podporu.

Niekedy existuje riešenie s lepšou podporou, ktoré nič nestojí – napríklad nejaké vlákno od vedľa, kde začiatočník rieši jednoduchý dvojstĺpcový layout flexboxom – inokedy je pre lepšiu podporu treba niečo obetovať a prichádza otázka, či sa to vôbec oplatí riešiť. Koľko je takých používateľov, ktorí by podporu ocenili? Je čas strávený nad vymýšľaním a implementáciou riešenia kvôli desatine percenta používateľov dobrou investíciou, ktorá sa vráti?

V tomto prípade je cenou za vynikajúcu podporu pár riadkov serverového skriptu*. Oplatí sa, aby sa vďaka pár riadkom kódu dvaja používatelia ročne s IE8 pousmiali, že sa im web nerozpadá? Ak je tá cena dostatočne nízka, rozlišujem dva typy kóderov – takých, ktorí tých pár riadkov navyše s dobrým pocitom napíšu a takých, ktorí mávnu rukou, lebo ... niečo typu, že staré prehliadače tu budú stále ak ich neprestanú podporovať.

Ale chápem kam tým mieriš. Posudzujem situácie individuálne.

* odmyslíme si, že možno je požiadavkou aj zarovnanie tlačidiel a iba s floatom situáciu nejde riešiť

Tomáš123:
nth-child ma podporu stejnou jako media queries, a to limitne 100%. Bud funguje obojí, nebo ani jedno.

Pokud chces řešit i ie8 (a fakt by me zajímalo, jestli takovy realne někdo je), tak stačí 1 třída na 4. element a další zaměřit pseudotridou.

Tomášeek:
Áno, teoreticky stačí jedna trieda.

Keď sa pýtaš, či taký fakt niekto je, tak sa domnievam, že sa mi moju filozofiu nepodarilo napísať dostatočne jasne.

Projekty, na ktorých som pracoval ďalej nijako nespravujem a nemám ani informáciu o tom, aká časť návštevníkov ich prezerá na IE8. Ale na tom nezáleží, tu sa bavíme všeobecne. To či na moje projekty chodia s IE8 všetci alebo nikto je irelevantné.