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
In the .left
rule set in style.css, add the grid-area
property and set its value to 4 / 1 / 9 / 5
.
In the .right
rule set in style.css, add the grid-area
property and set its value to 4 / 5 / 9 / 7
.
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.
Notice that the overlap
element is covered by the right
element.
Set the z-index
of the overlap
element to 5
.
In the footer
rule set in style.css, add the grid-area
property and set its value to 9 / 1 / 13 / 7
.