Let’s practice what we’ve just learned about CSS Grid through building a classic, grid-based, responsive web page. Your friend has just opened a doggie daycare and grooming services shop, PupSpa. They would like a simple web page to let customers know about their services.
We currently have an HTML document styled with CSS, but every <div> appears in its own row. Let’s add some CSS grid properties to make parts of the site appear more cohesive. Some of the properties we’ll by using include:
- display
- grid-template-rows
- grid-template-columns
- grid-gap
- grid-column-start
- grid-column-end
We’ll also cover a couple of the shorthand properties of these as well.
- HTML
- CSS
- Git, GitHub and GitHub Pages
- Clone the repository and change directory.
git clone https://github.com/RahimGuerfi/PupSpa.git
- Open "PupSpa/index.html" file.
This was a practice project from the full stack program at Codeacademy.