WDI-SEA / CSS-Grid-Art

CSS-Grid-Art

Now it is time to put some of these new layout skillz to work in replicating some very interesting artistic compositions.

Requirements

• Look at each image below (a composite by Piet Mondrian).
• You must replicate the structure of the composite using HTML and CSS.
• Do your best to match the colors in the boxes where applicable.
• Note the thickness of the border lines and match that as closely as possible.
• CSS Grid and Flexbox will be your main tools but feel free to use any other layout technique you've learned in standard CSS3 if they make sense.

Layout 1

Tableau II (Command-click to open in new tab.)

Layout 2

Tableau I (Command-click to open in new tab.)

Layout 3

Composition C (Command-click to open in new tab.)

Layout 4

Composition II in red blue and yellow (Command-click to open in new tab.)

Recommended Approach

1. Create a new directory in your code\unit1 folder for this project. You can also use Codepen or Repl.it
2. Create one HTML file and one CSS file per layout.
3. You could use one HTML file and one CSS file for all four layouts but you will need to plan your selectors well to avoid collisions. If you go this route, files should be organized with markup (html) in the root of the project and stylesheets in a /css folder.
4. Refer back to the notes for the lesson. Look up any unfamiliar syntax on MDN. Research specific solutions on Stack Overflow. Follow READ-SEARCH-ASK protocol and only ask others for help after you have exhausted your own avenues for answers.
5. Wireframe the layouts. Look for how it can fit into the grid and how you can make subgrids or flex containers inside it if necessary.