Quartz 4

Mondrian Painting

5 min read

Metadata

Notes

Project: Creating a Mondrian Art Piece with CSS Grid

This project serves as a comprehensive exercise to apply all learned CSS Grid concepts to build a complex, fixed-layout design resembling Piet Mondrian’s famous “Composition No. III with Red, Blue, Yellow and Black.”

1. Project Introduction & Goal

  • Inspiration: Piet Mondrian’s abstract grid paintings, which visually align perfectly with the capabilities of CSS Grid.
  • Goal: Recreate Mondrian’s “Composition No. III with Red, Blue, Yellow and Black” digitally using HTML and CSS Grid, specifically following provided dimensions for pixel-perfect accuracy.
  • Alternative: Students can choose any other Mondrian composition and attempt to recreate it by visually estimating grid track sizes.

2. Planning the Layout (Based on dimensions.png)

Before coding, it’s crucial to analyze the target painting and determine the grid structure:

  • Grid Container: The entire painting will be one large grid container.

  • Grid Items: Each colored rectangle (red, blue, yellow, black, and the various white sections) will be a separate HTML div, acting as a grid item.

  • Rows and Columns:

    • Carefully count the distinct vertical and horizontal divisions.
    • Columns: The provided dimensions show 4 distinct vertical lines, implying 4 columns of varying widths.
    • Rows: Similarly, 4 distinct horizontal lines, implying 4 rows of varying heights.

  • Fixed Sizes: Since the goal is a “to-scale” and “pixel-perfect” recreation, fixed px values are appropriate for grid-template-columns and grid-template-rows.

  • Gaps: The black lines in the painting can be simulated using the gap property on the grid container, with the container’s background color set to black.

    • Image: Mondrian Painting with Grid Overlay (Imagine the “Composition No. III with Red, Blue, Yellow and Black” image with transparent red lines overlaid, indicating the 4 columns and 4 rows, and labels for their pixel dimensions as described in the transcript (e.g., column widths: 320px, 198px, 153px, 50px; row heights: 414px, 130px, 155px, 22px).)

3. Core HTML Structure

  • Create a main div as the .container.

  • Inside this container, create a separate div for each distinct colored block in the painting. There are typically 9 such blocks in this specific Mondrian composition.

  • Assign appropriate classes to each div for styling their specific colors (e.g., red, blue, yellow, black, white).

    <div class="container">
    <div class="red"></div>
    <div class="white"></div>
    <div class="white"></div>
    <div class="white"></div>
    <div class="blue"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="yellow"></div>
    <div class="white"></div>
</div>

4. Core CSS for the Grid Container

This is where the main grid structure and overall appearance are defined.

  • display: grid;: Turns the container into a grid.

  • height and width: Set the overall dimensions of the painting based on the sum of track sizes and gaps.

  • background-color: Set to black. This color will show through the gaps, creating the black lines.

  • gap: Define the thickness of the “black lines” (e.g., 9px).

  • grid-template-columns: Define the width of each of the 4 columns using px values from the dimensions.png.

  • grid-template-rows: Define the height of each of the 4 rows using px values from the dimensions.png.

  • Centering the Painting: To center the entire grid container on the page, the Flexbox centering trick on the body can be reused:

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0; /* Or any page background */
}

    Example container CSS:

    .container {
    display: grid;
    height: 728px; /* Total height of all rows + gaps */
    width: 721px;  /* Total width of all columns + gaps */
    background-color: black; /* This shows through the gaps */
    gap: 9px; /* Thickness of black lines */
    grid-template-columns: 320px 198px 153px 50px; /* Specific column widths */
    grid-template-rows: 414px 130px 155px 22px; /* Specific row heights */
    /* Optional: border to define outer edge if desired */
    /* border: 1px solid black; */
}

5. Styling Individual Grid Items

  • Default Item Style: Give all div grid items a default background-color (e.g., white), as many blocks are white. 
    .container > div {
    background-color: white; /* Default color for most blocks */
}
  • Colored Blocks: Use the provided hex codes (e.g., red, blue, yellow, black classes) to override the default white background for specific divs. 
    .red { background-color: #E72F24; }
.blue { background-color: #244199; }
.yellow { background-color: #F0B12A; }
.black { background-color: #000000; }
  • Spanning Items: For blocks that span multiple cells, use grid-column or grid-row (or the grid-area shorthand).
    • Example 1: Large White Block (Spanning 3 columns)
      • Identify the large white block that takes up three of the initial columns in the top row.
      • Apply grid-column: span 3; to its specific div.
    • Example 2: Vertical White Block (Spanning 2 rows)
      • Identify the white block that spans two rows.
      • Apply grid-row: span 2; to its div.
    • Example 3: Complex White Block (Using grid-area or explicit lines)
      • For blocks that might start in a specific cell and span across both rows and columns.
      • grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
        • Example for the specific white block in the lecture (top-right, spanning 3 rows and 2 columns based on the visual plan): grid-area: 1 / 3 / 4 / 5; (assuming 4 columns total).
        • Carefully count lines or use the span keyword from the start position.

6. Review and Debugging

  • Chrome Developer Tools: Use the Grid Inspector in Chrome DevTools to visualize your grid lines, track sizes, and item placements. This is invaluable for debugging and confirming your layout matches the target.
  • Iteration: This project often requires an iterative process of adjusting grid-template-columns, grid-template-rows, and item span values until the layout perfectly matches the dimensions.png.

7. Key Learnings Applied

This project effectively utilizes:

  • display: grid; for the main layout.
  • grid-template-columns and grid-template-rows with fixed pixel units.
  • gap for creating visual dividers.
  • grid-column: span <number>; for horizontal spanning.
  • grid-row: span <number>; for vertical spanning.
  • grid-area: <start-row> / <start-col> / <end-row> / <end-col>; for precise 2D placement.
  • Flexbox (on the body) for centering the entire grid container on the screen.
  • CSS classes for specific styling of individual grid items.

References

Graph View

Backlinks