Why this experiment matters
The original site explored Grid before it was commonplace in beginner projects. Keeping this exhibit demonstrates how two-dimensional layout can carry expressive meaning.
ORIGINS STUDIO / CSS GRID
Composition is a relationship.
A modern, CSS-only reconstruction of the original Mondrian-inspired layout. The visual effect no longer depends on an external image host or a hover-only reveal.
Nine fields. One grid.
Each colored region is an HTML element occupying defined Grid tracks. There are no bitmap assets. The original composition remains below, while the desktop, tablet and phone views let you see true CSS viewport breakpoints without manually resizing your browser. The work is an original geometric interpretation, not a reproduction of a specific copyrighted image.
Original view: this full-width composition stays as the starting point. Resize your browser to see how the available space changes its proportions. The other modes let you study responsive Grid arrangements without resizing your own window.
Drag the slider to cross the tablet (900px) and phone (540px) breakpoints. The preview uses an actual embedded document viewport.
Simulated CSS viewport: 1120pxScaled to fit your screen when needed.
The desktop frame behaves like a real browser viewport. Its slider can move from narrow phone widths to wide desktop widths while keeping the same HTML elements.
Simulated CSS viewport: 768pxScaled to fit your screen when needed.
At 768px, the composition changes to six tracks and seven rows. Notice how the rectangles gain new positions rather than simply becoming smaller.
Simulated CSS viewport: 390pxScaled to fit your screen when needed.
At 390px, four tracks and a taller nine-row composition make better use of the available width. The same nine HTML elements remain in the same source order.
Responsive doesn't mean “shrink everything.”
Responsive design means the layout adapts to the space and context available. This preview uses a separate document inside an iframe; its CSS @media rules respond to the embedded viewport width, even if you're browsing on your phone.
- Desktop: eight columns, six rows (above 900px).
- Tablet: six columns, seven rows (541–900px).
- Mobile: four columns, nine rows (540px and below).
The device frames are teaching aids, not pixel-perfect emulators of particular hardware or operating systems.
One document, three arrangements.
/* Desktop is the base layout. */
.mosaic { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 900px) {
.mosaic { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 540px) {
.mosaic { grid-template-columns: repeat(4, 1fr); }
}Explore the interactive Grid lab to change columns and gaps individually, or inspect the responsive preview CSS to see the actual track placement rules.
How the art stays aligned
CSS Grid defines eight equal column tracks and six row tracks. Individual spans use grid-area: row-start / column-start / row-end / column-end. This gives precise composition without positioning each tile absolutely.
.artwork {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 8px;
}
.artwork > span:first-child {
grid-area: 1 / 1 / 4 / 3;
}What to consider before using it
The grid is decorative, so it has one concise accessible description rather than nine meaningless focus targets. Keep meaningful content in logical source order, and test reflow and zoom.