Starting CSS
Add the CSS to the left. We are creating a grid container with three columns set up at 1fr 2fr 1fr.Starting HTML
Add the HTML to the left to create eight boxes (grid items) for our layout.Below is what you get in a browser. So far, we have not done anything with justification or alignment.
Long before CSS Grid came out, Flexbox gave us powerful new ways to align content. Much like Flexbox, CSS Grid allows you to align elements or align content within elements. There are just six properties: justify-items, align-items, justify-content, align-content, justify-self, and align-self.
The term justify pertains to row alignment (horizontal) and the term align pertains to column (vertical) alignment.
You can apply these properties in three ways. Alignment can be applied to:
Below is what you get in a browser.
The property values could be any of the following: start | center | end | stretch, as shown below.
The property values could be any of the following: start | center | end | stretch, as shown below.
Below is what you get in a browser. Notice that grid item one has aligned its content to the left or starting position horizontally within the grid item. Also notice that the content in grid item two has aligned itself at the top or starting position vertically within the second grid item.
The property values could be any of the following: start | center | end | stretch, as shown below. Notice the effect of these changes on the first and second grid items.
A good example of the problem is seen in navigation when the items together need to be controlled for alignment.
The CSS properties here are called justify-content (for row/horizontal alignment) and align-content (for column/vertical alignment).
Possible values include start, center, end, space-around, space-between, or space-evenly.Starting CSS
Use the CSS to the left to create a three column layout. Each column will be 80 pixels (80px) wide, thus making them equal in width. Together, the grid items will take up only 240 pixels on a row. We are also adding a black border on the container to better see the relationship between the container and the grid items.Starting HTML
Add the HTML to the left to create eight boxes (grid items) for our layout.The result is shown below. Notice that with each grid item given a width of 80 pixels, it leaves all kinds of open space on the right side of the container.
The result is shown below. Notice how the grid is moved to the end of the row.
As noted, the justify-content property values could be any of the following: start | center | end | space-around | space-between | space-evenly. Notice the effect of using these values with the justify-content property.
A common alignment problem comes up when needing to horizontally align items within a menu/navigation area. As seen below, the default alignment gives no ability to control the menu's location nor does it allow us to control the spacing between items in the menu.
Starting CSS
Use the CSS to the left to create simple styles for a horizontal navigation area. We'll need four columns for the four grid items used to hold the menu items. We are setting each to a width of 100 pixels.Starting HTML
Create the HTML to the left to create the four grid items.Notice below that the menu items are all aligned along the left side of the larger container.
Below shows how nicely justify-content: space-evenly can be used to control the horizontal alignment of navigation items.
There is rarely a time when you should need to use align-content. That's because we usually want content to start at the top of an element anyway. Still, there will be times when the height of a container grows beyond the height of a particular grid item or the grid container could be given an absolute height using pixels (i.e. height: 500px) and that height may be taller than the grid items it contains. The illustration below shows the effect of applying the values start, center, end, space-around, space-between, and space-evenly to the align-content property.