From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Project: Grid layout

Project: Grid layout

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Grid layout

“

- [Instructor] In this project update, we'll use CSS grid to update the project section into a two-column layout. The thumbnail will be contained in the first column on the left, and the project details will be in the second column on the right. Here's how it looks currently. Let's start with the HTML file to add these updates. In the markup for the projects, the content for each project is contained within its own section tag. It already has a class of project item, so this can be defined as the grid container, but if we leave the content structure as is, each element, the image header, and paragraph, will become an individual grid item placed in its own grid cell. The thumbnail can be in its own grid cell on the left, but the rest of the content needs to be grouped together in a container so it can be displayed as one unit on the right. Let's create this container by adding a div just before the H3 tag. Then we'll add a…

Contents