An exercising in using CSS Grid to arrange small Japanese div
s into boxes.
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.
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!
Make sure to make your container a grid container, and then add column and row lines for each of the images!
Make the images not stretchy! Or squished!