The grid layout property is a grid-based layout system in which you can use columns and rows to define webpages instead of having to use floats and positioning.
A grid layout consists of one parent element where the display: grid needs to be set. It will then affect all immediate children of the parent:
<div class="grid-parent">
<div class="grid-child">Child 1</div>
<div class="grid-child">Child 2</div>
<div class="grid-child">Child 3</div>
<div class="grid-child">Child 4</div>
<div class="grid-child">Child 5</div>
<div class="grid-child">Child 6</div>
</div>With some grid styling:
.grid-parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: dodgerblue;
padding: 10px;
gap: 10px;
}
.grid-child {
background: white;
text-align: center;
padding: 20px;
}It will look like this:
❗ Only immediate children will be a part of the grid.
<div class="grid-parent">
<div class="grid-child">Child 1</div>
<div class="grid-child">Child 2</div>
<div class="grid-child">
Child 3
<div class="not-a-grid-child">Not a grid-child</div>
</div>
<div class="grid-child">Child 4</div>
<div class="grid-child">Child 5</div>
<div class="grid-child">Child 6</div>
</div>
Note that the "Not a grid-child" is placed inside the child 3 grid-item, and does not get affected by the display: grid.
As you might have noticed in the grid-css earlier there is more grid-properties than just display: grid and grid-template is one of them.
With grid-template-columns you define the size of each grid column. In the css above repeat(3, 1fr) means that there will be 3 columns per row where each grid-child gets 1/3 of the available space.
You can use a range of different sizing options when defining template columns e.g:
grid-template-columns: 100px 1fr 50% min-content max-content;
- 100px is a set pixel value
- 1fr is a fraction unit
- 50% is a percentage size based on the witdh of the parent
- min-content is the minimum size the element needs to not to cause overflow
- max-content is the elements ideal size given infinite available space
grid-template-rows works in the same way as columns.
grid-template-areas gives us a way to name each area in our grid layout. Notice the grid-template-area property on the parent and the grid-area on child elements:
<div class="grid-parent">
<div class="grid-child grid-child-1">1</div>
<div class="grid-child grid-child-2">2</div>
<div class="grid-child grid-child-3">3</div>
<div class="grid-child grid-child-4">4</div>
</div>.grid-parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"one two"
"three four";
background-color: dodgerblue;
padding: 10px;
gap: 10px;
}
.grid-child {
background: white;
text-align: center;
padding: 20px;
font-weight: 600;
font-size: 30px;
}
.grid-child-1 {
grid-area: one;
}
.grid-child-2 {
grid-area: two;
}
.grid-child-3 {
grid-area: three;
}
.grid-child-4 {
grid-area: four;
}
.
Here each child has gotten it's own grid-area name and the parent can use these names in the grid-template-area to set them up. By changing that property you can change the entire layout:
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"one one three"
"two four four";Will give the following layout:
.
This means we can use css to rearrange the order of the children without changing the HTML! This is especially useful if you need to change your layout on smaller devices.
❗ In this exercise edit the code in this editor: Grid task
Solution can be found here: Grid task 1 solution
Remember to ask if you are stuck on these tasks, also MDN is a good resource.
Give the header, content, footer and sidebar the grid-area: property and give them names.
Setup the grid-tempate-areas on the parent to make the following layout:
❓ How do you get the content 2x the size of the sidebar?
The gap property can be used to add spacing between grid elements. You can specify gap between rows by using row-gap, between columns with column-gap and between both with just gap.
gap
row-gap
column-gap
❗ You can either use the your solution from Task 1 to move forward or use the given solution Grid task 1 solution
Solution can be found here: Grid task 2 solution
📖 A card is commonly used name for elevated boxes with content
Our cards with text and kitten pictures looks a bit sad. To fix this, set up a new grid inside the grid.
The cards live inside the <div class="content"></div> so that will make our new grid parent. You should try to make it look something like this:
❓ Do you need to use grid-areas here, or could you solve this differently than the main layout? ❓ How do you get the same spacing between each card, but not on the outside?
By using the knowledge you obtained in the previous exercise, center the card content by using flexbox.