Ešte pred časom mali vývojári pri tvorbe rozloženia stránky v podstate dve možnosti. Buď použiť nejaké hacky riešenie zložené z mnohých plávajúcich elementov, alebo použiť HTML element <table>. Oba prístupy mali svoje problémy. Tieto časy sú, chvalabohu, preč a dnes môžeme používať moderné nástroje navrhnuté priamo na tento účel.

Jedným z takých nástrojov je grid layout v CSS. Keďže grid layout je podporovaný vo všetkých moderných prehliadačoch, nie je takmer žiadny dôvod používať element table na budovanie rozloženia. Element stále má svoje miesto — na zobrazovanie tabuľkových dát. V sémanticsekom webe je zvlášť dôležité používať správny element na účel, na ktorý bol navrhnutý, ale to nie je téma tohto príspevku.

Hoci navrhovanie webu je dnes oveľa príjemnejší zážitok, ako to bolo povedzme pred 15 rokmi, a každý deň sú dostupné nové a lepšie riešenia, web sa tiež rýchlo vyvíja a prináša nové problémy.

Nedávno som budoval malú hru, ktorú som mal v hlave. Musel som použiť tzv. hexagonal circle packing, ale s medzerami medzi kruhmi pre príjemnejší vzhľad. Vyskúšal som viacero prístupov a ten, ktorý najlepšie fungoval v rámci obmedzení hry a môjho kódu, bol prekvapivo grid layout.

Bolo to prekvapenie, pretože grid layout je jadrom iného druhu usporiadania kruhov — štvorcového. Štvorcové usporiadanie zaraďuje všetky kruhy do riadkov a stĺpcov, a grid layout tu skvelo funguje ako CSS riešenie.

Pri hexagonálnom usporiadaní sú kruhy naukladané tesnejšie. Keby ste sa snažili vystrihnúť čo najviac okrúhlych sušienok z jedného plechu, s hexagonálnym usporiadaním by ste mali menej odpadu ako pri štvorcovom. Ja som sa nesnažil minimalizovať odpad, tak prečo som potreboval hexagonálne usporiadanie?

Ukázalo sa, že je užitočné aj na zobrazovanie trojuholníkov zložených z kruhov, čo je podstata hry. Dali by sa použiť aj iné riešenia, ale žiadne z testovaných nebolo dostatočne dobré.

Zistil som, že je možné použiť záporné marginy na posúvanie elementov, dokonca aj v grid layoute. Výsledok môžete vidieť nižšie:

Hexagonálne usporiadanie kruhov s medzerami umožňuje zostaviť trojuholník

Pridal som červený hexagón na ilustráciu, odkiaľ toto usporiadanie dostalo meno, ale malo by to byť zrejmé aj tak. Všetky kruhy okrem kruhu 10 sú posunuté doľava pomocou záporného marginu.

.circle1 {
  margin-left: -60px;
}

Z dôvodov, ktoré som nepochopil, to isté nefungovalo pri posúvaní doprava — toto nespravilo nič:

.circle1 {
  margin-right: -60px;
}

Ak viete, prečo by to tak mohlo byť, dajte mi vedieť.

Toto je 3. príspevok série #100daystooffload.