Intro to CSS Grid Layout Part 3

This is a continuation of intro to css grid layout articles. Please refer to previous articles for declaring grid layout and fractional units in row/column. This post will specifically focus on the positioning and spanning of the grid item. Let’s take a look at the example image and code first.

Example

HTML Code

<div class="container">
  <div class="item item--1">1: Orange</div>
  <div class="item item--2">2: Green</div>
  <div class="item item--3">3: Violet</div>
  <div class="item item--4">4: Pink</div>
  <div class="item item--5">5: Blue</div>
  <div class="item item--6">6: Brown</div>
</div>

As you see in the above image and the HTML code, each item is placed in the order of declaration which is the default positioning of the CSS grid layout. Then, you might ask a question if it’s possible to place an item to a specific location. For example, how do you place the item 1: orange to the location of 5: blue? There are CSS properties that allow you to change the position.

CSS Code

.container {
  background-color: #eee;
  width: 1000px;
  margin: 30px auto;
  
  display: grid;
  grid-template-rows: repeat(2, 150px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 60px;
}

.item {
  padding: 20px;
  font-size: 30px;
  font-family: sans-sarif;
  color: white;
  
  &--1 {
    background-color: orangered;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    /*grid-row: 2 / 3;*/
    /*grid-column: 2 / 3;*/
  }
  
  &--2 {
    background-color: green;
  }
  
  &--3 {
    background-color: violet;    
  }
  
  &--4 {
    background-color: pink;
  }
  
  &--5 {
    background-color: blue;
  }
    
  &--6 {
    background-color: brown;
  }
}

Take a look at lines 20-23 in the CSS code. You have two choices to change the position.
1. use grid-<row/column>-<start/end>
2. use grid-<row/column> which is a short hand version

Do you remember there are row/column line numbers when you have CSS Grid? If you are not familiar with the concept, please refer to this article. Basically, there are row/column line numbers and you just need to specify row/column start/end position based on the number.

Looking at the image there are 3 row lines: start of the row grid, middle of the row grid and end of the row grid (1,2,3). There are 4 lines in the column: start of the column grid, 2 middle lines, end of the column grid. After specifying row/column start/end points you will notice that item 1 is now placed where item 5 was.

There are shorthand version of specifying row/column start/end which are commented at line 24,25. There is another shorthand version which is using grid-area but I think it is not really readable and didn’t specify here. You can take a look at the documentation for that.

What if more than one items are to be placed on the same position? Simply the last one will be rendered on top of the first one. The first item will not be shown.

What if you put multiple rows or columns in the grid-row or grid-column? It will simply span to take the specified area. Note that grid-column now has start at 2 and end at 4 which should take space from column 2 to 4.

  &--1 {
    background-color: orangered;
    grid-row: 2 / 3;
    grid-column: 2 / 4;
  }

Note that item 6 is now pushed to new row because item 1 is taking up the space. Even though we only specified 2 rows, CSS grid automatically expands to fit the items which is called implicit grid I will discuss in different post.

Another way of specifying the span is like this. Note that instead of specifying the end column in line 4, you can tell how many lines it should span in this case 2. Another special usage is putting -1 (at line 7) which means to span to the end of the columns.

  &--1 {
    background-color: orangered;
    grid-row: 2 / 3;
    grid-column: 2 / span 2;
    
    /*
    grid-column: 2 / -1;
    */
    
  }

Conclusion

We have taken a look at positioning of the grid item. In next post, I am going to explain how to name grid line numbers to improve readability.