CSS Grid

This site is a grid. A 290-pixel rail on the left for the name and the title, and nine flexible columns for the work.

CSS Grid is the first layout tool that matches how I already think on paper: tracks, spans, and things that sit in a cell. You name the columns, then place the work. No floats. No guessing at percentages.

A title that stays

On a project page the title is pinned to column one and told to span twenty rows. That is how it stays with you while the images move. The grid holds it. Sticky positioning only keeps it in the viewport — the column is already decided.

.project-layout {
    grid-template-columns: 290px repeat(9, 1fr);
}

.project-layout .project-text-intro {
    grid-column: 1;
    grid-row: 1 / span 20;
    position: sticky;
}

The homepage does the same thing in reverse: the image takes the wide columns, the project name is placed in a cell beside it. Once the tracks are set, layout becomes placement, not calculation.

I still start on paper. Grid is just the version that ships.