Bento Box

An exercising in using CSS Grid to arrange small Japanese divs into boxes.

Your Mission

This is an exercise in utilizing CSS Grid in a slightly more complex CSS layout.

You'll be making the picture in assets/goal.png using all the other pictures in there. The images are already on the DOM through the HTML file, but you should familiarize yourself with it, while working exclusively in style.css.

Please note that your dimensions do NOT have to be exact. Your pictures might look squished or stretched, and that's just fine! we're worried about getting things into the right place relative to each other, not the image dimensions.

What CSS Do I Have Already?

Good question! The basic dimensions of your container are laid out for you, as well as some code for each image that makes sure it takes up 100% of the space it can. You shouldn't have to change any of that code!

What Code SHOULD I Add?

Make sure to make your container a grid container, and then add column and row lines for each of the images!

Stretch Goals

Make the images not stretchy! Or squished!