CSS - Brief Grid Layout - Part 3
Tags: webdev, beginners, tutorial, css
Published: 2022-04-15 20:43:48

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.*

```CSS

.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;
}


```

![Grid Container show casing Grid Items Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiop86bj1cv2uo3toyni.png)

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.

```CSS
.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;
}


```
![Grid Container with Justify and Align Self on Grid Items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iii7l506y62ndxy70ze1.png)

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. 

![Eren Jaeger Smiling](https://i.pinimg.com/originals/af/d6/ac/afd6ac8963e1e501c208b1d717272ac8.gif)