#CSS display #flex vs #grid

When I was trying to make a grid view on my webpage to display my previous projects, I ran into a problem with displaying the boxes the way I wanted them to be by using flex boxes.
The last row of the grid can't align properly to the left when it has fewer items compared to the rows above.

What I wanted:

Display grid

What I got:

Display flex with justify-content center

asdasd

Display flex with justify-content flex-start

The css that I had was:

display: 'flex',

flex-direction: ‘column',

justify-content: ‘flex-start’,

flex-wrap: ‘wrap’,

alignItems: ‘center' 

On stackoverflow, I found these issue:
Targeting flex items on the last row - This thread lists down a lot of similar questions.
How to align left last row/line in multiple line flexbox
Flex-box: Align last row to grid

The solution is using CSS display grid. 

Display Grid

Refer to MDN document for more detailed information
You can also play around with this grid example codepen which was posted on stackoverflow.

By using display grid, I was able to achieve the following layout:

Display grid

The CSS that I have for the above screenshot. This is styled-component way of writing CSS.
display: grid
grid-gap: gap area between each grid item
grid-template-columns: a template telling grid how to arrange the grid items

Grid template columns

export const ProjectContainer = styled.div`
  display: grid;

  grid-gap: 1rem;

  grid-template-columns: repeat(auto-fit, 300px);

  width: 1100px;

  min-height: 30vh;

  margin: 3vh auto;

  ${media.larger`

    grid-template-columns: repeat(auto-fit, 250px);  

    width: 90vw;

  `}

  ${media.desktop`

    grid-template-columns: repeat(auto-fit, 220px);    

    width: 90vw;

  `}

  ${media.tablet`

    grid-template-columns: repeat(auto-fit, 170px);

    width: 90vw;

  `}

  ${media.phone`

    grid-template-columns: repeat(auto-fit, 300px);

    grid-gap: 0px 0px;   

  `}

Grid Template Areas

There is various ways of using display grid. One rather special way is using template area. You can set a template using character grid. The same character group represents one section on the grid.
For example, the following template represents 3 rows. 

grid-template-areas: "a a a"

                     "b b b"

                     "c c c";

Then, you can use it like following and they will be arranged according to the template and specified dimension.

#headerContainer {

  display: grid;

  width: 90vw;

  height: 300px;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-auto-rows: 100px;

  grid-template-areas: "a a a"

                       "b b b"

                       "c c c";

}

#header {

  background-color: tomato;

  grid-area: a;

}

#nav {

  background-color: green;

  grid-area: b;

}

#title {

  background-color: red;

  grid-area: c;

}

You can learn more about display grid via this Grid by example video available on MDN.
You can also see more examples of how it can be used on MDN Grid template areas page.

Thank you for reading!

Jun