Exercise to review CSS Grid
Clone or download
Latest commit b310774 Mar 29, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
img fix image path Jan 29, 2018
index.html put styling.css at starter level, update readme instructions Jan 28, 2018
readme.md Update links for fundamentals module Mar 29, 2018
style.css update css solution image, change borders to grid-gaps Jan 29, 2018


CSS Grid Art

For this exercise, you will be creating an abstract work of art using CSS Grid! More specifically, you will be attempting to recreate a piece called Composition with Red Blue and Yellow by Piet Mondrian.

Steps to clone down and open

  1. Open up Terminal
  2. Change into your exercises directory
  3. git clone git@git.generalassemb.ly:dc-wdi-fundamentals/css-grid-art.git
  4. cd css_grid_art to change into the cloned down directory
  5. code . to open the directory you are currently located in VS Code
  6. open index.html to open your index file in your browser.

At first glance you should see something that kind of resembles the shape of the original painting but is a bit off. Use the numbers to help you with the order and update your style.css file to resize and recolor your divs. The first one has been done for you.

You will only need to edit style.css to complete the exercise. You don't need to recreate the image exactly - there's a lot of subtlety here! (You can also get rid of the numbers in the index.html file if you'd like, they are there to help you)

Use the painting of the image or one possible solution for guidance.


Create your own Mondrian-inspired works of art using CSS Grid from scratch! You can create a new git branch with git checkout -b branch-name, delete the divs and styling and start from scratch!

painting image from wikipedia.