We have referred to “two-dimensional grid-based layout” several times throughout this course.
There are two axes in a grid layout — the column (or block) axis and the row (or inline) axis.
The column axis stretches from top to bottom across the web page.
The row axis stretches from left to right across the web page.
In the following four exercises, we will learn and use properties that rely on an understanding of grid axes.
justify-items
is a property that positions grid items along the inline, or row, axis. This means that it positions items from left to right across the web page.
justify-items
accepts these values:
start
— aligns grid items to the left side of the grid areaend
— aligns grid items to the right side of the grid areacenter
— aligns grid items to the center of the grid areastretch
— stretches all items to fill the grid area
There are several other values that justify-items
accepts, which you can read about on the Mozilla Developer Network. The definitions for these values can also be found in the documentation. It is important to note that the page with the definitions includes some values that are not accepted in CSS Grid layout.
<main> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> </main>
main { display: grid; grid-template-columns: repeat(3, 400px); justify-items: center; }
In the example above, we use justify-items
to adjust the positioning of some elements on this web page.
- There is a grid container with three columns that are each 400 pixels wide.
- The container has three grid items that do not have a specified width.
- Without setting the
justify-items
property, these elements will span the width of the column they are in (400 pixels). - By setting the
justify-items
property tocenter
, the.card
<div>
s will be centered inside of their columns. They will only be as wide as necessary to contain their content (the words Card 1, etc). - If we specify a width for the
.card
elements, they will not stretch the width of their column.
This property is declared on grid containers.
Instructions
Look in style.css. Each column inside of the <main>
element is 250 pixels. The recipes stretch to take up the entire 250 pixels.
In the .recipe
rule set, add the width
property and set its value to 200px
.
What changes?
In the main
rule set, add the justify-items
property and set its value to end
.
The elements might not move all the way to right side of the browser. We’ll learn why in the following exercise.
In the main
rule set, change the value of the justify-items
property to center
.