I would suggest finding a single use for grid that flexbox doesn't really do well, and use only a couple properties. Then you will really understand the benefit of grid without having to invest a lot of time.

An example I dealt with recently: I needed a header with logo / external link / social icons/ content / phone link. All to layout perfectly, and be mobile friendly.

With grid, I used this: (this is rough code to demonstrate the simplicity, I made a codepen demonstrating it properly. [0])

  header {
   display: grid;
   grid-template-areas: 
     "logo content link social"
     "logo content phone phone";
  }

For each of the logo, content, etc... areas you use this to attach it to the specific location in the grid.

  .logo {
    grid-area: logo;
  }

  .content {
    grid-area: content;
  }

  etc...

You end up with exactly what you would expect:

  +------+---------+-------+--------+
  |      |         | link  | social |
  + logo + content +-------+--------+
  |      |         |     phone      |
  +------+---------+-------+--------+

For mobile, I wanted this:

  +---------------+
  |     Logo      |
  +---------------+
  |    Content    |
  +------+--------+
  | Link | Social |
  +------+--------+
  |    Phone      |
  +---------------+

Here's the only CSS needed for mobile. (or reverse this if you are doing mobile first layout)

  @media (mobile) {
   header {
    grid-template-areas: 
      "logo    logo"
      "content content"
      "link    social"
      "phone   phone";
   }
  }

Here's the html:

  <header>
    <div class="logo"   ></div>
    <div class="content"></div>
    <div class="link"   ></div>
    <div class="social" ></div>
    <div class="phone"  ></div>
  </header>

The power to move content around with such simple and clean code like this is amazing.

With flexbox you can use the "order" property to move stuff around a little, but not control the exact layout so cleanly and simply. There are tweaks for adjusting the widths of columns and heights of rows, but this is generally all that is needed to get the layout with grid.

There is also grid-gap [1], something not possible in flexbox yet. (though Firefox supports grid-gap with flexbox)

[1] https://codepen.io/Vanderson/pen/yWWVVZ

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap