Grid Layout

Published in

Chen-Chih’s Portfolio Page

28 min readNov 7, 2022

Last time I have write an article or post related to Flex layout. Today I finally understood and finished stying using grid layout. Today I would like to share GRID-related setting and how to use it.

Grid is a two dimension layout whereas Flex is a one-dimension. So you might be curious what’s one dimension and 2 dimensions. So basely when using Flex you can only decide to use row OR column by identifying with the position properties. But in Grid is two dimensions, which means a row AND a column.

The article will be pretty long just like Flex. I don’t like to write a skill or note in a separate post. The reason is it might be difficult to catch up. I prefer writing all related things in one post. So people might not like it, and it might be difficult to read. So let's begin our journey to GRID layout.

I watch many types of youtube Channels to u understand the concept of GRID, and make it into this blog. I am not a frontend developer, but I’m interested in WEB.

In this post I will be covered these articles:

1. display (enable grid propertis )
2. grid-template:
grid-template-column
grid-template-row
grid-template
grid-template-areas
3. grid-auto-flow
grid-auto-column
grid-auto-rows
grid-auto-flow
4.gap
column-gap
row-gap
gap
5.Alignment & Spacing
within grid cell
justify-items
align-items
place-items
justify-content
align-content
place-content
Grid item(Child Properties):
Grid-column-start
Grid-column-end
Grid-row-start
Grid-row-end
Grid-column (shorthand)
Grid-row (shorthand)
Alignment item within Cell
Justify-self: alignment along the row axis
Align-self: alignment along the column axis
Place-self: shorthand

Part 1 GRID Structure & Terminology

In the first section, I would like to introduce the structure and Terminology of the GRID. If you understand it, you can just skim through the article, because most of it is related to flex just some properties are different.

Grid just like Flex has Parent properties (GRID) and Child properties (ITEMS), just like the below diagram:

Let me introduce some terms you must know.

Grid line: Horizontal(Column) and Vertical(Row) divided line in a grid
Grid Cell : The intersection of the grid which is bordered by four adjacent grid lines with no grid lines, the smallest unit of a grid.
Grid-Area: is a rectangular area made up of one or more adjacent grid cells.
Grid-Track: space between two adjacent grid lines is a grid track. I have two types of Track, implicit and explicit track. Grid columns go along the block axis, which is vertical, whereas grid rows laid inline (horizontal) axis

explicit-track: Place an item inside the grid, use grid-template-columns and grid-template-rows, the line will uses dashed line. Please refer blow picture.
implicit-track: Place an item outside of that grid, you MUST use grid-auto-rows and grid-auto-columns , line will use a dotted line. Please refer below picture

I will dicuss about track in below

GAP: spaces between each column/row are called gaps.

Part 2 Grid Container(parent Properties)

I will use this code in the below example, so keep it in mind if you don’t have any idea of the full code. I will not change a lot of the code just add some HTML grid items or CSS properties. Let's begin our Journey to GRID！！！！

HTML

<body>
    <div class="container"> 
        <div class="grid-item item-1">Item 1</div>
        <div class="grid-item item-2">Item 2</div>
        <div class="grid-item item-3">Item 3</div>
        <div class="grid-item item-4">Item 4</div>
        <div class="grid-item item-5">Item 5</div>
        <div class="grid-item item-6">Item 6</div>
        <div class="grid-item item-7">Item 7</div>
        <div class="grid-item item-8">Item 8</div>
        <div class="grid-item item-9">Item 9</div>
    </div>
</body>

*{
    margin: 0px;
    padding: 0px;
}

.container{
display: grid ;
border: 6px solid black;
}

.grid-item{
color: #000;
font-size: 1.5rem;
padding: 1rem;
text-align: center;
}

.item-1{
    background-color: red;
}
.item-2{
    background-color: yellow;
}
.item-3{ 
    background-color: lightgreen;
}
.item-4{
    background-color: pink;
}
.item-5{
    background-color: skyblue;
}
.item-6{
    background-color: greenyellow;
}
.item-7{
    background-color: green;    
}
.item-8{
    background-color: blue;
}
.item-9{
    background-color: orange;
}

1. display :

By default the content has created a single-column grid for the items. All of the grid items lay in row, which behave like block element, so this is why even if you don't add display: grid the content will lay block. If you don't want grid container to display in block, you can change it to inline-block.

There are two properties for display as below:

Display properties : <grid> or <inline-grid>
display: grid : default items lay in row and stretch behave to block element
dispplay: inline-grid: will not display in block element

CSS

.container{
display: grid ; //or inline-grid
border: 6px solid black;
}

As you can see above add display: grid properties item will lay Horizontally (X direction), which is also the default setting.

2. grid-template: set rows or columns

Properties and Value of grid-template:

- grid-template-row:<value> : set how many rows
- grid-template-column: <value> set how many column
- grid-template: <row>/<column>: shortcut for row and column

There are many different value properties we can use, so please see the below example. e

non-negative length value like px, % , rem or etc which we use often
auto value: use the size if the content if the items.
fr value: fraction which will take over available space, just like flex’s grow and shrink
repeat() or min-max() function value: repeat to repeat value, minmax can adjust min or max value just like responsible webpage
auto-fit or auto-fill value: fill up the

Note: Fr and auto seem alike, when fr meets auto, fr has a higher priority (FR>auto). Please refer the comparison between fr, auto and px.

2.1 grid-template-columns (column width /Y axis/vertical axis)

Specifies the number of columns in a grid layout, each value represents the size of the column; the width of items. The column also refers to Y axis vertical axis.

Syntax: grid-template-columns: <size grid value>
1 column => grid-template-columns: 100px;
3 column => grid-template-columns: 100px 100px 300px
Note: the more value you enter the more column will get set

Let me show you different value properties as an example:

PX and auto:

PX: will set according to the fixed size you set.
Ex: grid-template-columns:100px 200px 300px

auto: will stretch to max width or use the available space. As You can see above when set PX it will still have available space left over, we can use the auto to fill up the available space.
Ex: grid-template-columns: auto auto auto;

Fr:

Fr Fraction value: similar to auto will fill up available space. If we have 100%, the first and third are given 25% of the space, and the second one five 50% of the space
Ex: grid-template-columns: 1fr 2fr 1fr

repeat and minmax

Repeat: can only be used when all columns have the same size, if you have a different size, then you need to set individual.
syntax: repeat:(N, value) , N is repeat time, value you can define like fr, px, etc
Ex: repeat(3, 1fr) which mean all 3 columns have a width of 1fr
minmax:We can also use repeat() with minmax() together, which commonly be use. We can use it to set min and max values. The column should be at least 200px, once less than 200px, the column will start to overflow.
syntax minmax: minmax(min, max);
EX: grid-template-columns: repeat(3, minmax(200px, 1 fr));

As you can see top right picture full width, when we reduce our browser, the last column will overflow, this is because our min width 200PX, when less than min will overflow. We can use PX orFR to define the value.

Comparison between Fr and PX

After knowing different types of value properties, let me summarize the difference between PX and FR to make it more clear using the below picture.

fr value take over all available space just like %
px value will only set according to what you specify

2.2 grid-template-row(row height /X axis/Horizontal axis)

Specifies the number of rows(height) in a grid layout. It’s the same as the column except for instead set width, we set its height of it. The row also refers to X axis horizontal axis.

Syntax: grid-template-rows: <size grid value>

PX and auto:

PX: will set according to the fixed size you set.
Set the first row to 100px
Ex: grid-template-rows: 100px;
Set three row of different height
Ex:grid-template-rows: 100px 150px 200px;

Auto: set three-row same height
Ex: grid-template-rows: auto auto auto;

repeat

Repeat: can only be used when all row have the same size, if you have a different size, then you need to set individual.
syntax: repeat:(N, value) , N is repeat time, value you can define like fr, px, etc
Ex1 : repeat 3 times 100px row height grid-template-rows: repeat (3, 100px)
Ex2: repeat 2 times 100px row height, the rest row use the default grid-template-rows: repeat (2, 100px)

Ex3: adding a new row grid-template-rows: repeat (3, 100px) 200px

Comparison between Fr and PX

Let's compare the difference between FR and PX usage. In this example let assign container height to 400px, height: 400px

FR value:
We have set our height to be 400px, and we also added a fr value in it, which will stretch available space to fill up the container.
Ex1: grid-template-rows: repeat(3, 1fr);
PX value:
We have set our height to be 400px, and we also added a px value in it, which will only use the space you assign and leftover with available space.
EX2: grid-template-rows: repeat(3, 100px);

The biggest difference between fr and px is fr value will take over all available free space, whereas px value won't. As you can see above picture on EX1, I have added height to the container and apply 3 row with 1fr which will take all available space, and stretch. On Ex2 if I set the row with px, it will only apply the size and be left out with available space.

PX will only set according the actual size
FR: will stretch out and use the space, think as auto

2.3 grid-template (shortcut for column and row)

This is a shorthand for specifying columns and rows, if you are lazy you can use this way. You just have to add a slash / to separate a row and column. Below is the example, and I’m not going to tell more detail which is the same as the above row and column.

Syntax: grid-template: ROW / COLUMN
EX: grid-template: repeat(2, 1fr)/repeat(3, minmax(200px, 1fr));

.container{
    display: grid ; 
    border: 6px solid black;
height: 400px;
grid-template: repeat(3, 1fr) /repeat(3, minmax(200px, 1fr)); 
}

2.4 Other properties value

I have introduced the FR, Auto, PX, repeat, minmax value. But there are some great values that I also wish to mention in this part. If you’re not interested you can skip this part. I will cover these values:

auto-fit and auto-fill
fit-content
auto and fraction

auto-fit and auto-fill

I want to talk about this special value, using auto-fit and auto-fill as a value.

Auto-fit: Will fit the column you define into avaiable space. If not knowing how many columns you want. See how much content is in items, it will figure out how many you can fit in it.
Auto-fill: fills the row with as many columns as it can fit. It will keep adding new columns even thought it’s empty.

In the below, as you can see without using the auto-fit and auto-fill, just use PX as width, it will contain many available spaces. In order to fillup the space, you can use the auto-fit or auto-full method.

Example1: auto-fit and auto-full

Let's add the below setting to our container:

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: repeat(auto-fit, 150px);
    grid-gap: 10px;  
}

If we resize the browser, items will jump into the next line when there is no much space left.
auto-fit :will add one more column(new colulmn)
auto-fill :will not add one more column(will use what you define)

Let's see the below picture, you will notice that if I add auto-fill it will add more columns, whereas auto-fit won’t.

Let add item-9 to be more clear about it, please add the below setting on item-9. If you want to move item-9 to the end of the column,

auto-fit will move to the last new column
auto-fill will only stay on the last column

please refer to the below picture for more clear understanding.

.item-9{
grid-column-end: -1;
}

Examle2: minmax() + auto-fill for Responsive Grids

auto-fill+ minmax => will have aviavble space left,
auto-fill FILLS the row with as many columns as it can fit.

Auto-fill will fill the row with as many columns as it can fit, but will leave out will available space. So We set minmax(150px, 1fr), which the max 1fr will fill up as many columns as it has, but if we narrow the browser to less than 150px the column will overflow to the new row.

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 10px; 
}

Example3:minmax() + auto-fit for Responsive Grids

auto-fit+ minmax => will fill up all the space
auto-fit: FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space.

In Example2 we use the auto-fill method, it will contain many leftover available spaces, but if we use auto-fit, it will fill up all space. The max will take all the space, but if we narrow the browser less than 150px the column will overflow to a new row.

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 10px; 
}

Auto-fill and Auto-fit have a similarity when reducing the browser it will decrease the column because we have set the min to 150px. When I reduce the browser both Auto-fill and auto-fit will do responsible to reduce the column from the original 4 columns to 3, 2, 1.

fit-content:

The fit-content() property use to define the function to put a limit on the maximum size of the division. It’s similar to using the minmax() function, with a minimum value of 0.
Syntax: grid-template-columns: {fit-content(percentage |length)}
As you can see below when I set fit-content(50px), if content reach 50px will overflow.
EX: grid-template-columns: fit-content(50px) 200px 100px;

Ex2:grid-template-columns: fit-content(500px) 200px 100px;

In the first column of the grid layout, we set 50px, the column has a maximum allowable width of 50px and the second column has 200px width, and the last column has a 100px. So the first column has fit-content(50px), which means will never expand beyond the specified width.

Please refer below picture, as you can see I set the first column to 50px, but the content which is the text is more than 50px, so the text will overflow, when I set it to 500px the text will display the original.

There are also min-content, max-content you can also use.
the min-content is the smallest size a box can take without overflowing its content. uses the length of the widest bit of content.

syntax: grid-template: min-content: {column-value}

the max-content stretch to the max of the content, without being wrapped or it overflows

syntax: grid-template: max-content: {column-value}

For more detail, you can refer to this article

different between auto and fr

I have mention both fr and auto in above, but when fr and auto use together, it will display differently. Both auto and fr minimum width of the content length, and use the avaiable space, if no space shrink it.
when Auto and Fr use together:
Let me show you if fr and auto use together, fr win, they both fight for the remaining space, auto loses its the width and shrinks down to min-with of content width. Fr will have a high priority than auto when they meet together.

Please refer to this article for more detail about it.

2.5 Grid-template-area

In this section, I will show how to create grid-template-area, you can decide to use grid-template-area or grid-template-column or row.

syntax:
grid-template-areas:
"name name name"
“name name name”
“name name name”
grid-area: name;

Note:

We need to declare grid-template-areas: {name}in the container, and declare grid-area:{name} in the grid-item. The name can be a character or word, it doesn’t matter, but it must be the same as name you declare in the container (grid-template-area), and in the item(grid-area). These two setting association or link with each other, if not the grid-area will be broken.

Let me show you how it work with 2 example for clear understand:

Example1: basic grid area

Code as below:

<div class="container"> 
<div class="grid-item item-1">Item 1</div>
<div class="grid-item item-2">Item 2</div>
<div class="grid-item item-3">Item 3</div>
<div class="grid-item item-4">Item 4</div>
<div class="grid-item item-5">Item 5</div>
<div class="grid-item item-6">Item 6</div>
<div class="grid-item item-7">Item 7</div>
<div class="grid-item item-8">Item 8</div>
<div class="grid-item item-9">Item 9</div>
<style>

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 150px 150px 100px;
    grid-gap: 10px;  
    grid-template-areas: 
    "sidebar1 content sidebar2"
    "sidebar1 content sidebar2"
    "footer footer footer"    
}

let's add the name of our item else will not work:

.item-1{
grid-area: sidebar1;
background-color: red;}
.item-2{
 grid-area: content;
  background-color: yellow;
}
.item-3{ 
    grid-area: sidebar2;
background-color: lightgreen;}
.item-4{ 
    grid-area: sidebar1;
background-color: pink;
}.item-5{ 
    grid-area: content;
 background-color: skyblue;
}.item-6{ 
    grid-area: sidebar2;
background-color: greenyellow;
}.item-7{
background-color: green;
grid-area: footer;
}.item-8 {
background-color: blue;
grid-area: footer;}.item-9 {
background-color: orange;
grid-area: footer;}

Below you can see the name of areas show like sidebar1, content, sidebar2, etc. This is pretty important and it will link to our container’s grid area. If you use the wrong name, gird-break will not work.

This is a pretty example just like we use in grid-template-row and column.

Example2:

Let's change the container to 4 div

<div class="container"> 
<div class="grid-item item-1">Item 1</div>
<div class="grid-item item-2">Item 2</div>
<div class="grid-item item-3">Item 3</div>
<div class="grid-item item-4">Item 4</div>
.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 150px 150px 100px;
    grid-gap: 10px;  
    grid-template-areas: 
    "sidebar1 content sidebar2"
    "sidebar1 content sidebar2"
    "footer footer footer"    
}<style>
.item-1{
  grid-area: sidebar1;
background-color: red;
}
.item-2{
    grid-area: content;
background-color: yellow;
}
.item-3{ 
    grid-area: sidebar2;
background-color: lightgreen;
}
.item-4{ 
    grid-area: footer;
background-color: pink;
}
</style>

We can also use leave the empty area using the . like this: footer footer . Below have two examples using with and without empty areas.

3. grid-auto-flow

In this section we are going to talk about Implicit and explicit tracks, without knowing it you’re not able to understand what is auto-flow.

3.1 Understand implicit and explicit track

In the previous properties, we already know grid-template, which you can refer it as an explicit track. In this section, I will mention grid-auto-flow, which you can refer it as implicit track. So let's dive into more detail between these two tracks in order to understand what’s grid-auto-flow. Honestly, this might not be used often, it depends.

Implicit: Create by browser or itslef
Explicit: you create it either using grid-template-column or grid-template-row properties

Let me show you the different tracks using pictures to be more clear. Below the first picture, you can see I ONLY define the column, the row will become implicit defined by the browser. In the second picture, I define the row, so the row will become explicit. So there is no implicit.

If I add new grid items, the newly created items will become implicit. Originally I have Items1~Items4, which I also declare 2 columns and 2 rows. Now if I add new items (item4 and item5), it will become implicit, because we only declare 2 columns and 2 rows. The two new extra items will become implicit. If we create another item7 item8, it will also be implicit.

How do we check implicit or explicit? We can also use the line to distinguish between is it implict or explicit track. In the above picture 1, or the below pictures I have marked the arrow to show you the line type.

So we have an understanding of what is the implicit and explicit track, so let's move to grid-auto-flow to see more examples.

3.2 grid-auto-flow:

Control how auto placed items get inserted into the grid
syntax:
grid-auto-flow: {row| column| dense| row dense| column dense}
default the value is row

As we can see below picture I declare only grid-auto-flow, which the default I row, all the rows will stretch out, but if I change to a column the item will place next to each other in a column. Please note here there is no grid-templace-column, so all of this track are implicit.

3.3 grid-auto-flow row and column

Let's talk more about the typical use case we use often. I define 2 column using grid-template-columns, but we have 3 grid items, the third item, will automatically flow to the next line or new row which is the default, or you can refer it as implicit track.

So how do we lay item3 next to item2? This is where we add grid-auto-flow , all the items in implicit will lay in a column rather than a row(default), just add grid-auto-flow:column .

If we add more items, all the rest items will flow next to item2. But keep in mind that item1~item2 are explicit, and the rest items are implicit. This concept you MUST know to better understand what’s is an auto-flow and different track.

3.4 grid-auto-flow dense

I don’t actually use this often, but I think you show know what is dense. Dense is just like a space between the track, so let me show you what is dense.

If we have a code like this:

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 150px 150px 100px;
    grid-gap: 10px;  
}

Let's add an item with span . We will talk about span in the below section. I just want to show you what's dense. In order to use dense, we need to have an empty spot, so span is able to establish empty spot.

.grid-item:nth-child(4n){
background-color: yellow;
grid-column: 2 span;
}

.grid-item:nth-child(4n) this mean every 4th item will use this styling

In the below picture, item8 will overflow to a new line because there is no spot to store 2 span.

Now let's add grid-auto-flow with dense and see what will happen.

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 150px 150px 100px;
    grid-gap: 10px;  
    grid-auto-flow: dense;
}

In the above, I mention that item-8 have no space and overflow to the next line. If we add dense properties, the empty spot or track will be replaced by other items. Please refer to the picture to make more sense.

As you can see that the empty spot is been filled up by the next items can fill in the space, this is what we call dense.

3.5 grid-auto-row and column value

Since we already know grid-auto-flow, then we need to start to know how to set the value of the height or width of row and column.

- grid-auto-column: Setting default column’s width
Value: pixel, %, minmax, auto(default)
Syntax: grid-auto-column:<value>
EX:grid-auto-column: 100px
- grid-auto-row: Setting default row’s height
Value: pixel, %, minmax, auto(default)
Syntax: grid-auto-row:<value>
EX:grid-auto-row: 100px

Below the picture we set each column with a different size: grid-auto-column: 100px 500px 100px . As you can see from the picture we have declared a grid-template (first two items), and the rest item will use the grid-auto-columnvalue because they are all implicit tracks.

Remember that auto-flow will apply to implicit track

4. GAP

This is a pretty easy setting, so I am not going to explain much more detail from the word gap you will notice the gap between each grid.

Spacing between row and column: <row gap> <column gap>
specify the gap between columns using: column-gap
specify the gap between row using row-gap
value can be non negative value or a perentage

EX1 column gap or space between each other: column-gap: 20px

EX2 row gap or space between each other: row-gap: 20px;

EX3 shorthand for row-gap and column-gap : gap: 50px 20px;

5. alignment and spacing within the cell

In this section we will need to understand about the alignment of the cell, which is pretty similar to flexbox.

within grid cell:
justify-item for aligment => row or X axis
alignment-item for aligment => colummn or Y axis
place-item: shorthand for <align> <justify>
within grid container:
justify-content=> row or X axis
align-content => colummn or Y axis
place-content: shorthand for <align> <justify>

5.1 justify-items

alignment along the row or X axis
syntax: justify-items: {stretch| start| end | center}
default the value is stretch

Example:

.container{
display: grid ;
border: 4px solid black;
grid-template: repeat(3, 1fr)/repeat(3,minmax(200px, 1fr));
justify-items:end;
}

5.2 align-items

alignment along the column or Y axis
syntax: align-items: {stretch| start| end| center}
default the value is stretch

Example:

.container{
display: grid ;
height:400px;
border: 4px solid black;
grid-template: repeat(3, 1fr)/repeat(3,minmax(200px, 1fr));
justify-items: center;
align-items:end;
}

As you can see in the picture justify-items is been set to center which will not move, align-items will move from {start|center|end}. Align-items will move down Y axis.

5.3 place-items

shorthand for align-items and justify-item
syntax: place-items : <align-items> <justify-item>
There are two way we can set the value, with 2 value (start and end), or 1 value, which both obtain the same value.
EX1 place with two values: place-items: start end
EX2 place with one value: place-items: center

Example:

.container{
display: grid ;
height:400px;
border: 4px solid black;
grid-template: repeat(3, 1fr)/repeat(3,minmax(200px, 1fr));
place-items: start end
}

5.4 justify-content

Alignment and spacing alone row or X axis
syntax: justify-content: { start |center | end |space-between| space-around |space-evenly }
default the value is start

.container{
display: grid ;
height: 800px;
border: 6px solid black;
grid-template: repeat(3, 200px)/ repeat(3, 200px);
justify-content: start;
}

Think the whole grid-item is a group, so when set justify-content, row will be moved to right or horizontal direction. Please refer below picture for more detail.

5.5 align-content

Alignment and spacing alone column or Y axis
syntax: align-content: { start |center | end |space-between| space-around |space-evenly }
default the value is start

Think the whole grid item is a group, so when set align-content, column will move to bottom or vertical direction. Please refer below picture for more detail.

.container{
display: grid ;
height:800px;
border: 6px solid black;
grid-template: repeat(3,200px)/repeat(3,200px);
justify-content: space-around;
align-content: space-around;
}

5.6 place-content

shorthand for align-content justify-content>
syntax: place-content : <align-content> <justify-content>
EX1 place with two value: place-content: start end
EX2 place with one value: place-content: center

The whole grid-item is a group, so when set place-content, all the row and column will be moved. Please refer below picture for more detail.

.container{
display: grid ;
height:800px;
border: 6px solid black;
grid-template: repeat(3,200px)/repeat(3,200px);
place-content: start end;
}

Part 3 Grid Items(ChildProperties)

Code

.container{
display: grid ;
border: 6px solid black;
grid-template: repeat(3, 200px)/repeat(3,200px);
}

1. Items position

Properties control the position of the item in the grid

Properties :
column: Grid-column-start <value> and Grid-column-end <value>
row: Grid-row-start <value>and Grid-row-end<value>
column and row（shorthand）: Grid-column <start> <end> and Grid-row <start> <end>

There are two types of Value: line, and span. Let me explain these two values before diving into this topic.

Value: line or span

Line : <line number or track >

Line identity Row and Column track, please refer to the below picture.

start and end column and row:
grid-row-start <line value>
grid-row-end <line value>
grid-column-end <line value>
grid-column-end <line value>
shorthand row and column:
grid-row: <start-line-value>/ <end-line-value>;
grid-column: <start-line-value>/ <end-line-value>;

Span: <cell number>

The number of column or row item has to span, and each cell mean one span. The first cell means span 1, the second cell = track 2.

span start and end is auto(when only 1 value): span 2
span start end with track or line:span 2/5 start with 2 span end 4 span

1.1 grid-column-start and grid-column-end with line

Example1: Line

Let's add start at line 2 or track 2 and end at line3 or track3, you can also use negative means on the last track.
You can use the shortcut by using a slash / with start track and end track.

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: repeat(3, auto);
    grid-gap: 10px; 
}
.item-1{
grid-column-start: 2; 
grid-column-end: 3; 
}
.item-3{
grid-column: 1/-1;

1.2 grid-column and grid-row(shorthand)with span

Example1: span

Span how many cell you want to use.
So in the below example, we use grid-column:2 spans mean start first track and end at track2. grid-row:2 spans mean take take 2 cell

.container{
    display: grid ;  
    border: 5px black solid;  
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px; 
}

.item-1{
grid-column: 2 span;
grid-row:2 span;
}

.item-2{
grid-column: 2 span;
}

.item-4{
grid-column: 2 span/4;
}

item-1:column start with span of 2 cell, and row start with 2 span

item-2: column start at 3 track, because the first two track is been used by item1. So item-2 continues the next track (track3 or line3) with 2 spans.

item-4: end at line4 or track 4 with 2 span, so you can see the pink item4 will start at line 2.

Note: Span have no start and end, so you have to use it with track. For example, if I have span 3/4, which means it will end at line 4 with 3 span forward like below

Example2: more examples as below

2. Alignment item (set single grid item)

We can use alignment with justify-items, align-items, or place-items properties that apply to every item in the container, which I introduce previous section.

However, If you want to alignment for one single item, you can use the below with self properties.
justify-self: alignment along the row or x axis move right
align-self: alignment along the column or y axis move down
place-self: shorthand for <align-self> <justify-self>

2.1 justify-self

syntax: justify-self: {stretch |start |center|end}
default the value is stretch

In this example, I am showing you item 2(yellow item), so If I add justify-self: center; only item2 will change which will move x-axis or horizontal direction(move to the right).

.container{
    display: grid ;
    border: 6px solid black;
    grid-template: repeat(3, 200px)/repeat(3,200px);
}

.grid-item{
color: #000;
font-size: 1.5rem;
padding: 1rem;
text-align: center;
}
.item-1{
    background-color: red;
    grid-column: 1/span 2;
    grid-row: 1/span 2;

}
.item-2{
    background-color: yellow;
   justify-content: stretch;

2.2 align-self

syntax: align-self: {stretch |start |center|end}
default the value is stretch

In this example, I am showing you item 2(yellow item), so If I add align-self: center; only item2 will change which will move y axis or vertical direction(move to the bottom)

.item-1{
    background-color: red;
    grid-column: 1 /span 2;
    grid-row: 1/span 2;

}
.item-2{
    background-color: yellow;
    justify-self: center;
   align-self: stretch;
}

2.3 place-self

Shorthand for align-self and justify-self
syntax: place-self : <align-self> <justify-self>

.item-1{    background-color: red;
    grid-column: 1 /span 2;
    grid-row: 1/span 2;

}
.item-2{
    background-color: yellow;
place-items: start end;
}

In the above example, you can see place-self you can use one value or two values, start and end. When you put only one value, means both align and justify will position in the end.

Part 4 Example and Layout

In part 1~Part 3 I have already shown you the basics of the grid setting, let me show the layout using a grid examples to make more sense of what we have learned.

Example1: Basic Layout of both grid template and grid area

In this example, I will show you using grid-template and grid-area.

Step1: Create a HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div class="grid-container" >       
        <header class="grid-item">Header</header>
        <main class="grid-item">Main</main>
        <aside class="grid-item">Aside</aside>
        <section class="grid-item">section</section>
        <footer class="grid-item">footer</footer>
    </div>
</body>
</html>

Step2: Styling it using grid-template

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: lightgray;
    text-align: center;   
}
body .grid-item{
    border-radius: 40px;
    font-size: 5rem;
    background-color: blue;
    }

.grid-container{
    width: 90%;
    margin: auto;
    display: grid ;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 200px 400px 400px 200px;
    grid-gap: 20px;;
} 

header{
grid-column: 1/5;
grid-area: h;
}
main{
    grid-column: 1/4;
    grid-row: 2/4;
}

aside{
}

section{
}

footer{
    grid-column: 1 /5;
}

Step3: style it with grid area

*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color: lightgray;
    text-align: center;  
}
body .grid-item{
    border-radius: 40px;
    font-size: 5rem;
    background-color: blue;
    }

.grid-container{
    width: 90%;
    margin: auto;
    display: grid ;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 200px 400px 400px 200px;
    grid-gap: 20px;;

    grid-template-areas: 
    'h h h h'
    'm m m a'
    'm m m s'
    'f f f f'   
    ;
} 
header{
/* grid-column: 1/5; */
grid-area: h;
}
main{
    /* grid-column: 1/4;
    grid-row: 2/4; */
    grid-area: m;
}
aside{
    grid-area: s;
}
section{
    grid-area: a;
}
footer{
    /* grid-column: 1 /5; */
    grid-area: f;
}

Step4 output will have same result

Example2:

Let have another easy example as below:

Step1: HTML

<body>
  <h1> GRID </h1>
  <div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  </div>
</body>

Step2: styling css

.container {
  background-color: blue;
  padding: 10px;
  color: black;
  display: grid;
  /*  columns  */
  grid-template-columns: auto auto auto;
  /*  row height  */
   grid-template-rows: 80px  200px 50px;
   /*  gap  */
   grid-gap: 40px 60px;  
}

.container > div{
   background-color: yellow;
  padding: 20px 0;
  font-size: 30px;
  text-align: center;  
}

Step 3 output

Conclusion

After here you should have a basic understanding of the grid. I understand this article is pretty long, but I have tried my best to explain the most commonly used properties, and there are many more I might not cover.

So the most important you must only is

Alignment: Justify is horizontal, the x-axis moving to the right, and align is vertical, Y axis moving downward.
implicit and explicit track: explicit track create by us (grid-template-column or row), and the rest will be implicit (gird-auto row or column).
understand different values: Fr(fraction), Auto, px, repeat(), minmax(), auot-fit, auto-fill, fit-content,min-content, max-conent.

Lastly, I study all of the resources on Youtube Channel, and I linked them in the reference section, which is pretty useful. Hope my post will help you.

Reference:

https://www.quackit.com/css/grid/tutorial/explicit_vs_implicit_grid.cfm
https://pjchender.dev/css/css-grid-layout/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://shunnien.github.io/2018/03/18/css-grid-06/
https://www.geeksforgeeks.org/css-fit-content-property/
https://www.rawkblog.com/2018/03/css-grid-understanding-grid-gap-and-fr-vs-auto-units/
https://www.youtube.com/watch?v=T-slCsOrLcc&list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG
https://www.youtube.com/watch?v=0xMQfnTU6oo&t=705s
https://www.youtube.com/watch?v=RhUuMl3R1PE&t=2001s