Skip to Content
Learn
Advanced CSS Grid
Overlapping Elements

Another powerful feature of CSS Grid Layout is the ability to easily overlap elements.

When overlapping elements, it is generally easiest to use grid line names and the grid-area property.

<div class="container"> <div class="info">Info!</div> <img src="#" /> <div class="services">Services!</div> </div>
.container { display: grid; grid-template: repeat(8, 200px) / repeat(6, 100px); } .info { grid-area: 1 / 1 / 9 / 4; } .services { grid-area: 1 / 4 / 9 / 7; } img { grid-area: 2 / 3 / 5 / 5; z-index: 5; }

In the example above, there is a grid container with eight rows and six columns. There are three grid items within the container — a <div> with the class info, a <div> with the class services, and an image.

The info section covers all eight rows and the first three columns. The services section covers all eight rows and the last three columns.

The image spans the 2nd, 3rd, and 4th rows and the 3rd and 4th columns.

The z-index property tells the browser to render the image element on top of the services and info sections so that it is visible.

Instructions

1.

In the .left rule set in style.css, add the grid-area property and set its value to 4 / 1 / 9 / 5.

2.

In the .right rule set in style.css, add the grid-area property and set its value to 4 / 5 / 9 / 7.

3.

In the .overlap rule set in style.css, add the grid-area property.

Set its value so that the overlap element spans the 6th and 7th rows and the 4th and 5th columns.

Remember, the grid-area property accepts 4 values: grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

4.

Notice that the overlap element is covered by the right element.

Set the z-index of the overlap element to 5.

5.

In the footer rule set in style.css, add the grid-area property and set its value to 9 / 1 / 13 / 7.

Folder Icon

Take this course for free

Already have an account?