CSS Grid

I just learned this technique from Jen Kramer. You can use CSS Grid to create a layout that looks like an existing Mondrian painting.

Start with the painting you want to re-create, and identify all the grid lines, both vertical and horizontal. To determine the vertical grid lines, start with number 1 at the far left, then scan across the painting. Anywhere you see the right edge of a box, create the next vertical grid line. Number them in sequence from left to right.

Do the same for the horizontal grid lines. Grid line 1 is at the top of the painting. Then anywhere you see the bottom edge of a box, create the next horizontal grid line.


Now that you have the grid lines defined, you can easily determine the grid-row and grid-column values for each box. For example in the drawing above, box "e" has grid-row: 3/6; and grid-column: 2/3.

Next you need to determine how wide each column is and how tall each row is. Put these dimensions into the properties "grid-template-columns" and "grid-template-rows" of the grid container. When measuring these dimensions be sure to not include the black gaps between the boxes. For example, for row 2/3 in the diagram, measure from the top of box "g" to the bottom of box "b".

You'll also need measurements for the horizontal and vertical gaps between the boxes. Put these measurements into the "grid-gap" property of the grid container.

Next set the background colors of your boxes. The container should have a black background, and various boxes within the container should have their own background colors to match the original painting.

Image Credit: Kristine, Mondrian Dress, 1965, CC BY NC 2.0