TailwindCSS: playground
geen [container], alleen "mx-auto"
flex flex-row
col 1 (flex flex-row) basis-1/2 lg:basis-2/3
col 2 (1-derde)
col 1 (flex-none lg:flex gap-12)
col 2 (flex-1)
col 3
lg:columns-2
col 1: responsive grid (lg:columns-2 gap-12)
col 2: responsive grid
col 1 (grid grid-cols-2 gap-12)
col 2
block 1: responsive grid (grid lg:grid-cols-2 gap-12)
block 2: responsive grid
01 [justify-stretch]
02
03
04
01 [justify-stretch]
02
03
04
05
01 [justify-evenly]
02
03
Vaste verhouding 2/3e <=> 1/3e
01 (grid grid-cols-3 gap-4) => col-span-2
02
Cases (lg:flex)
lg:flex cell
lg:flex cell
"Vel ultricies morbi odio facilisi ultrices accumsan donec lacus purus. Lectus nibh ullamcorper ac dictum justo in euismod. Risus aenean ut elit massa. In amet aliquet eget cras. Sem volutpat enim tristique."
Maria Hill –
Marketing Manager
grid-auto-columns
01
02
03
04
05
06
07
flex met w-[number]
01
02
03
04
05
flex flex-wrap
01
02
03
04
05
06
07
grid-row
01
02
03
grid-row
01
02
03
04
05
06
grid-row
01
02
03
04
05
grid-auto-rows
01
02
03
grid-auto-columns
01
02
03
grid-auto-columns (test)
01
02
03
04
05
06
07
08
flex icm. columns (!)
01
02
03
04
05
06
07
flex: grow (test)
01
02
03
04
05
06
07
colums-2 (columns)
(Alle columns zijn per definitie even breed!)
01
02
03
04
05
06
07
flex flex-wrap
01
02
03
04
05
06
07