Čtyři sloupce ve Stacks

Dnešní tutorial popisuje nejsnazší cestu k vytvoření čtyřsloupcového layoutu ve Stacks. Zatímco dva nebo tři sloupce vytvoříte pouhým přetažením příslušného komponentu na pracovní plochu, čtyři sloupce je nutné sestavit ručně. Použijeme k tomu tři komponenty pro dvousloupcový layout: jeden jako základ a následně přetáhneme do každého sloupce opět dvousloupcový modul - tak, jak je vidět na prvním obrázku. Pro lepší názornost jsem texty zarovnal do bloku, aby byly mezery mezi sloupci lépe patrné.

Po zobrazení Preview zjistíme, že mezi sloupci jsou různě široké mezery. Je to dáno právě těmi dvojicemi, které jsme vytvořili. Nyní si ukážeme, jak správně upravit příslušná nastavení tak, abychom vše dostali do rovnováhy. V první řadě se ujistíme, že máme v paletce Page Inspector / Page správně nastaveny parametry margin a padding. Ve výchozím stavu jsou tyto hodnoty: margin 2 px (odsazení směrem ven) a padding 5 px (odsazení směrem dovnitř). Ujistěte se, že u všech rámečků, které jste použili jsou tyto parametry zcela vypnuté, v opačném případě by se všechny tyto hodnoty sčítaly.

Nakonec upravíme jednotlivé sloupce. U každého z nich nastavte v šedém okně šířku 90 %, aby vznikly větší mezery, pak 1. sloupec zarovnejte k levé straně (Frame Position: Left) a 4. sloupec k pravé straně (Frame Position: Right). U 2. a 3. sloupce ponechte umístění na střed.