CSS LAYOUT SYSTEM

Responsive Grid Generator

ブレークポイントを決める前に、カードが保つ最小幅を決める。

CSS Grid対応
02

LIVE COMPARISON

同じ画面幅、違う組み方

SAME WIDTH
FIXED COLUMNS

固定4列

SAFE
card width255px

最小幅を保っています。

RESPONSIVE GRID

auto-fit + minmax()

REFLOW
actual layout4 columns

カード幅から列数を決めます。

VIEWPORT1080pixels
MIN WIDTH240pixels
COLUMNS4auto
ACTUAL WIDTH255pixels
03

CSS OUTPUT

カード幅から列数を決める