CSS - Brief Grid Layout - Part 3

All great things come in 3 parts... right? Probably not 😁. Anyway, hey everyone, I wanted to finish off my brief guide about CSS Grid Box Layout. I have not mentioned any properties which you can use on Grid Items so I will do so now. 🥳

Grid Area

If you have read my previous posts, you will know that grid-area is a property that you can use on the Grid Items, which allows you to set a name that you can reference in the Grid Container property grid-template-areas. It is also a shorthand property for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

With these properties, you can set your Grid Items to span various cells as determined by the Grid-Row/Column-Start/End.

Lets take a look at an example 😀.

Example 1 - Here, I have set the Grid Container to be a 5 x 5 grid using previous properties we talked about. I also set the justify and align items to stretch, this makes the Grid Item fill the whole cell along both axes.

You will see the screenshot below the code snippet here, I have enable the Grid Lines on the DevTool so that you can see how these numbers correlate. Note: you can use a shorthand property to combine grid-row-start and grid-row-end, similarly for column.

.grid-container {
  background: #222;
  width: 50vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  justify-items: stretch;
  align-items: stretch;
  gap: 10px;
}

.grid-item.a {
  grid-row-start: 2;
  grid-row-end: span 3;
  /* short hand property grid-row: 2 / span 3 */
  background: orange;
}

.grid-item.c {
  grid-column-start: 3;
  grid-column-end: 5;
  /* short hand property grid-column: 2 / 5 */
  background: lightblue;
}

.grid-item.e {
  grid-area: 3 / 2 / 6 / span 2;
  background: lightgreen;
}

In the above example, you can see that you can use the keyword span to determine how many row cells or column cells you would like to span across, the alternative is explicitly state the end number and note that it refers to the grid number line and not the row or column cell. See above image.

Justify and Align

Our old friend Justify and Align can be used on the Grid Items in the form of justify-self and align-self. These two properties allow you to move the Grid Item within its Grid Cell, this will overwrite the justify-items if set on the Grid Container. The main difference is that justify-items move every Grid Items while, justify-self is only for that Grid Item. Similarly for align-self.

(Reminder 🧐 - justify moves items along the inline/horizontal axis, and align moves items along the block/vertical axis.)

Lets look at an example.

Example 2 - In the below example, we overwrite the justify-items with justify-self moving the Grid Item to the inline end. Similar, we overwrite align-items with align-self to move the Grid Item to the start of the block axis. And finally, justify-self and align-self to the center, centering the Grid Item 5 within the Grid Cell.

.grid-item.a {
  grid-row-start: 2;
  grid-row-end: span 3;
  /* short hand property grid-row: 2 / span 3 */
  background: orange;
  justify-self: end;
}

.grid-item.c {
  grid-column-start: 3;
  grid-column-end: 5;
  /* short hand property grid-column: 2 / 5 */
  background: lightblue;
  align-self: start;
}

.grid-item.e {
  grid-area: 3 / 2 / 6 / span 2;
  background: lightgreen;
  justify-self: center;
  align-self: center;
  width: 100px;
  height: 100px;
}

For number 1, we did not overwrite the align-items: stretch property, so the Grid Item is still stretched to cover from top to bottom. Similarly, to number 2 as we did not overwrite justify-items: stretch set on the Grid Container so the Grid Item is still stretched from left to right.

Summary

To sum up, grid-row-start let you choose which grid row line to start placing the Grid Item and grid-row-end to determine which grid row line the Grid Item stops. This can be combined using shorthand grid-row. Read the last sentences again and change row for column 😅, now you know how to place the Grid Item exactly where you want to. You can also use the keyword span to quickly set how many cells to span.

We also touched on how you can overwrite the justify and align items set by the Grid Container using justify-self and align-self. 👌

That is all for my brief guide to CSS Grid Box Layout. We have covered most of the main properties for the Grid Container and now we have covered most of the main properties for Grid Items. Now you know enough to build simple or complex grid layout with these properties in your next projects!

As always, any feedback or comments relating to the information or other parts of my post are welcome.