A deep dive into recreating Barcelona's Modernist hydraulic tile floors using CSS Grid, covering six tile motifs built with gradients and border-radius tricks, how subgrid lets overlay elements align precisely to a parent grid's real track lines without manual math, why fr units silently break when combined with trig functions like sin() inside calc() (percentages work instead), and how atan2() can drive continuous per-cell rotation and wavy column widths computed live in the browser.
Table of contents
How it actually worksWhy the shape has to be symmetricalPainting across the seamsThe cost of colourThe formula, in pure CSSQuestions this post answers
Why does my CSS grid collapse into a single column when I use calc() with fr units and sin()?
Browsers do not reliably resolve calc() expressions that mix a flexible fr unit with a trigonometric function like sin() inside grid-template-columns. The whole declaration is treated as invalid, causing the grid to fall back to one implicit column. Using percentages instead, such as calc(11.1111% + 4% * sin(...)), resolves correctly and produces distinct pixel widths per column computed live in the browser. Developers debugging odd CSS grid layout collapses can find similar edge cases surfaced on daily.dev.
How do I align an overlay element to the exact grid lines of a parent CSS grid without calculating pixel positions manually?
Use CSS subgrid: give the overlay element the same column and row span as the whole parent grid, then set grid-template-columns: subgrid and grid-template-rows: subgrid on it so it inherits the parent's already-resolved track lines instead of drawing its own. Placing a child at specific grid-column and grid-row values then lands it exactly on the real seam between parent cells, even when tracks are uneven sizes. Anyone piecing together subgrid layout patterns can track more CSS grid techniques on daily.dev.
Why does my grid layout break when I give an absolutely-needed subgrid overlay a full grid-column and grid-row span?
An overlay spanning the entire grid with grid-column: 1 / -1 and grid-row: 1 / -1 needs that span so subgrid can inherit parent tracks, but as an ordinary grid item it also claims every cell for itself, pushing sibling items with no explicit placement into new implicit rows with no defined height, collapsing the layout. Setting position: absolute on the overlay removes it from grid placement while still letting subgrid read the line positions from grid-column and grid-row. Developers wrestling with subgrid overlay bugs can keep track of CSS layout gotchas via daily.dev.
10.2K Impressions2 Comments