Test your skills: CSS grids
This skill test aims to help you assess whether you understand how a grid and grid items behave. You will work through several small tasks that use different elements of the material you have just covered.
Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.
CSS grids 1
In this task, we want you to create a grid into which four child elements will be auto-placed. The grid should have three columns that share the available space equally, with a 20px gap between the column and row tracks. After that, add more child elements inside the parent container with the grid class and see how they behave by default.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<div class="grid">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.grid {
/* Add styles here */
}
The finished layout should look like this:
Click here to show the solution
Create a grid using display: grid with three columns using grid-template-columns and a gap between the items:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
CSS grids 2
In this task, we already have a grid defined. We want you to edit the CSS rules for the two child elements so that each one spans several grid tracks. The second item should overlay the first.
Bonus question: Can you now cause the first item to display on top without changing the order of items in the source?
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<div class="grid">
<div class="item1">One</div>
<div class="item2">Two</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.item1 {
background-color: rgb(74 102 112 / 70%);
border: 5px solid rgb(74 102 112 / 100%);
}
.item2 {
background-color: rgb(214 162 173 / 70%);
border: 5px solid rgb(214 162 173 / 100%);
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item1 {
/* Add styles here */
}
.item2 {
/* Add styles here */
}
The layout should look like this after you complete the task:
Click here to show the solution
It is possible for multiple items to occupy the same grid cells and layer on top of each other.
One option is to use the shorthands below; however, it would be correct to use the longhand grid-row-start for example.
.item1 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.item2 {
grid-column: 2 / 5;
grid-row: 2 / 4;
}
For the bonus question, one way to achieve this is via the order property, which we encountered in the flexbox tutorial.
.item1 {
order: 1;
}
Another valid solution is to use z-index:
.item1 {
z-index: 1;
}
CSS grids 3
In this task, the grid contains four direct children. They are currently auto-placed in the grid.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
To complete this task, use the grid-area and grid-template-areas properties to lay out the items as shown here:
Click here to show the solution
Each part of the layout needs a name using the grid-area property and grid-template-areas to lay them out. Possible areas of confusion would be not realizing you should place a . to leave a cell empty, or that you should repeat the name to cause an element to span more than one track:
.grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"aa aa"
"bb cc"
". dd";
}
.one {
grid-area: aa;
}
.two {
grid-area: bb;
}
.three {
grid-area: cc;
}
.four {
grid-area: dd;
}
CSS grids 4
In this task, you will need to use both grid layout and flexbox to recreate the finished layout. The gap between the column and row tracks should be 10px. You don't need to change the HTML to achieve this.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<div class="container">
<div class="card">
<img
alt="a single red balloon"
src="https://mdn.github.io/shared-assets/images/examples/balloons1.jpg" />
<ul class="tags">
<li>balloon</li>
<li>red</li>
<li>sky</li>
<li>blue</li>
<li>Hot air balloon</li>
</ul>
</div>
<div class="card">
<img
alt="balloons over some houses"
src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg" />
<ul class="tags">
<li>balloons</li>
<li>houses</li>
<li>train</li>
<li>harborside</li>
</ul>
</div>
<div class="card">
<img
alt="close-up of balloons inflating"
src="https://mdn.github.io/shared-assets/images/examples/balloons3.jpg" />
<ul class="tags">
<li>balloons</li>
<li>inflating</li>
<li>green</li>
<li>blue</li>
</ul>
</div>
<div class="card">
<img
alt="a balloon in the sun"
src="https://mdn.github.io/shared-assets/images/examples/balloons4.jpg" />
<ul class="tags">
<li>balloon</li>
<li>sun</li>
<li>sky</li>
<li>summer</li>
<li>bright</li>
</ul>
</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.card {
display: grid;
grid-template-rows: 200px min-content;
}
.card > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tags {
margin: 0;
padding: 0;
list-style: none;
}
.tags > * {
background-color: #999999;
color: white;
padding: 0.2em 0.8em;
border-radius: 0.2em;
font-size: 80%;
margin: 5px;
}
.container {
/* Add styles here */
}
.tags {
/* Add styles here */
}
The layout should look like this after you complete the task:
Click here to show the solution
The container needs to be a grid layout, as the cards are aligned in two dimensions — rows and columns.
The <ul> needs to be a flex container, as the tags (<li> elements) are aligned in one dimension — rows only — and they are centered in the space with the alignment property justify-content set to center.
.container {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
.tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
}