CSS GRID LAYOUT MODULE LEVEL 3

CSS Masonry

高さが違っても、空白を残さず詰める。

CHECKING

LIVE PACKING STUDIO

同じDOM、違う詰まり方

4 LANES 14 GAP

LAYOUT PRESET

作品ボードを組み替える

LAYOUT ENGINEGRID LANES

FLOW DIRECTIONWATERFALL

レーン数4 23456 Gap14px 612182432 Flow tolerance16px TIGHTORDER FIRST 値を上げるほど、小さな差ではレーンを移動しません。

Featured span注目カードを2レーンにする DOM orderHTML上の順番を表示

gridlanes.local / inspiration

SIMULATED GRID LANESWATERFALL ↓

SELECTED OBJECTS / 2026

Form follows rhythm.

VisualTypeSystem

IDENTITY / 01

Orbit
Systems

Motion language for a new digital studio.

TYPE / 02

Neue
Rhythm

“

ESSAY / 03

Good grids leave room for surprise.

Structure is not the opposite of expression.

INTERFACE / 04

Blue hour

POSTER / 05

MOVE
WITH
INTENT.

SOUND / 06

Soft Signal

Edition of 100.

SPACE / 07

Common Ground

DIGITAL / 08

One system.
Many voices.

A flexible identity built from strict parts.

OBJECT / 09

Offset

ARCHIVE / 10

Patterns become a language when they repeat.

EXHIBITION / 11

Between

CAMPAIGN / 12

Days of light

Seasonal stories in warm color.

WAYFINDING / 13

Go further

RESEARCH / 14

See the invisible structure.

Notes on systems, rhythm and attention.

HOW IT PACKS

行ではなく、レーンで考える

短いレーンを選ぶ次の要素は、より手前に置けるレーンへ入ります。

Gridの機能を保つ列幅、gap、span、明示配置をそのまま使えます。

順番に注意する見た目の位置が変わっても、DOMとTab順は変わりません。

IMPLEMENTATION

4行から始める

ブラウザの対応状況を確認しています。