Flex Grid CSS
Centered, responsive multi-column layouts with Flexbox + Container Queries.
No JS dependency. No grid hacks.
8 cards — fg fg-6321 fg-gap20 fg-min200
6 columns max, min-width 200px. Last row always centered.
1Alpha
2Bravo
3Charlie
4Delta
5Echo
6Foxtrot
7Golf
8Hotel
5 cards — fg fg-6321 fg-gap40 fg-min300
Larger gap and min-width.
AFirst
BSecond
CThird
DFourth
EFifth
3 cards — fg fg-6321 fg-gap20 fg-min300
XOne
YTwo
ZThree
Nested — Container Queries in action
Outer container limits width — inner grids adapt automatically.
Inner grid — fg-gap10 fg-min100
1Nested
2Nested
3Nested
4Nested
5Nested
Inner grid — fg-gap10 fg-min100
ANested
BNested
CNested
DNested
Inner grid — fg-gap10 fg-min100
INested
IINested
IIINested
12 cards — fg fg-6321 fg-gap10 fg-min100
Many small items show the full 6-column layout.
01
02
03
04
05
06
07
08
09
10
11
12