Mikke.Learns

Coding log 05.11.19

May 10th, 2019

The third day of learning CSS grid.

I’m continuing these challenges with the property “justify-self”. It’s a way to align an item horizontally in the grid.

In CSS Grid the content of each item is located in a box called a cell. We can align the content’s position within its cell horizontally using justify-self.

By default, this property is set to stretch. It will make the content fill the whole width of its cell. But we have other values as well:

  • Start: aligns the content at the left of the cell.

  • Center: aligns the content in the center of the cell

  • End: aligns the content at the right of the cell.

align-self

We can also justify an item vertically using align-self. This property accepts the same values as justify-self, described above.

justify-items

We can align all items horizontally. That’s handy when you want all your items to have the same alignment. This has to be set on the grid container. This property also takes the same values as justify-self and align-self.

align-items

And we can of course also align all items in the grid. We do this by using align-items.

Area template

We can use the CSS property “grid-template-areas” to group cells in the CSS Grid into an area with a custom name.

grid-template-areas: "top top top" "picture content content" "bottom bottom bottom";

The code above merges the three top cells into an area named top and the three bottom cells into an area names bottom. Two areas are created in the middle row; picture and content.

In addition to custom names, we can use a period (.) to designate an empty cell in the grid.

grid-area

After creating areas in our grid, we can place items in these custom areas. All we have to do is to reference the name we gave it by using grid-area:

.item-1 { grid-area: top; }

This tells the grid to place item-1 in the area named top. In this case, item-1 will use the entire top row because the whole row is named top.