I can recommend "The New CSS Layout" for getting up to speed on CSS Grid (among other modern and legacy layout techniques): https://abookapart.com/products/the-new-css-layout

It does mention subgrid too.

Oh man if you like flexbox, I'd definitely take the time to really get in there on grid. Learning to mix the two together has been amazing.

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

Flexbox can't fully replace grid, or vice versa. In particular, this very feature, subgrids, can't be reproduced with flexbox.

Yes flex is cool because you don't need a new type of element just add the property "display: flex" to anything.

I think Grid is a bit more complicated, more to learn. CSS is getting better but at the same time it's getting more complex in total.

They solve different problems however. They are complementary, not substitutes.

Though both are used for laying out your content, but Grid and Flexbox serve different purposes though. We can probably still use Flexbox for majority of the cases, but Grid was designed to help with some specific CSS layout problems that only it could resolve.

flexbox works beautifully with grid

Mixing the two is very useful. I typically make headers and footers with flex, build home page grids with grid, and then use flex to space out content in the cells.

No more floats, no more percent widths, no more weird nth child tweaks for positioning.

Add rems to the mix and responsive design has never been simpler. For grids you can just change from say a 3 column grid to a single column on mobile for most cases.

And the best part, no bootstrap.

I've stopped caring about people on ie or some super outdated browser version.

None of my projects have an audience that includes 90 years olds using ie6 on windows xp. I assume my users are on some chrome derivative that is fairly up to date.

I'm not going to use this until it's well supported, but I'll have no qualms going so.

I certainly am not worried about anything I've used flex or grid for... they've been out for quite awhile now.

I'm not sure why we are all trained to think that anything we build has to be compatible with old browsers that essentially no one is using.

For most projects, I don't see a point unless you have some really specific requirements.

For variable amount of "cards" that could eventually wrap this really is not possible to do in pure CSS without subgrid, as sibling comment confirmed. It is possible for fixed amount of cards: simple grid with named areas; it is possible for variable amount of cards when at least two of its components (e.g. header and footer) have fixed height: flex (or grid).

Once you have to match more than one variable dimension across two axis (headers/bodies/footers laid in vertical axis matching their "siblings" in horizontal axis in our example) you need either JavaScript, broken semantics or subgrid. This is -- as I understand it -- raison d'etre of CSS Grid Level 2.

Grid is nothing like tables.

Yes, I know that, and am doing it, too, on my sites. Still, squeezing everything into a single HTML page, then applying CSS (and JS) fu to arbitrarily rearrange, add and drop content doesn't seem rational when website design processes draw upfront desktop, mobile, etc. breakpoints and sketches. Rather, CSS complexity seems a manifestation of organizational boundaries (eg. W3C specifying CSS and WHATWG specifying HTML) to me. Or even a post facto rationalization of the road not taken with HTML. Eg. almost all responsive designs used today can be achieved much more easily using adaptive techniques where there is a device/breakpoint-specific page layout for desktop, mobile, and maybe tablet, resp., with the page template documents pulling in content wherever it fits. It's just that HTML lacks mechanisms for page composition such as SGML's and XML's entity references. Arguably, responsive grids are not only more complex than needed, they're also inefficient wrt. network utilization, as every device has to receive every bit of content, just to hide it away when it doesn't fit the layout. Of course, large sites use JavaScript and visibility events to pull content on-demand anyway.

I'm not pissing on W3C's (fantasai et al) work here. CSS is very much a work in progress as we all discover new UI idioms for digital media, and I'm a sucker for it. I just think CSS grids and flexbox is bordering on intellectual brain wankery, when the solution could be achieved much, much simpler, and in a way that doesn't send newbies into a world of cluelessness, doesn't question our ability to consume our own digital media in the future due to over-complexity, and retains the qualities of the web as a medium for simple self-publishing even for a layman.

Ok, but you still need tons of JavaScript for webapps, and the trend has been to generate inline styles using JavaScript, JSX/React etc. anyway. Not sure introducing the complexity for webapps, with the content-oriented web as collateral damage, was worth it.

Even if you acknowledge a separation of content/structure and presentation, the layering of new ad-hoc languages (CSS) eg. a different syntactic construct, onto markup does not follow from that premise at all. Markup attributes were introduced exactly for the purpose of holding rendering properties, eg. everything that isn't directly presented to the viewer. The ideal of "semantic markup" was only proposed once CSS was established, as a way to rationalize this ad-hoc separation after the fact. Now with CSS we have a million DSLs without type checking, huge cognitive deficits, and every single problem imaginable when a new language is bolted on top of another. All because HTML had to be backward-compatible, and evolution of HTML as a markup language was held back due to unrelated organizational problems. This is not a good outcome when SGML has all the power you want for rigorously developing document formats on a very long timescale.

Edit: Look at the comments in this thread. They're mostly about "how flexbox works" and how to apply particular CSS grid features. Nobody actually authors content with the intent of structure/presentation separation.

Why do you think a different way would be less accessible or couldn't be made accessible by engines that parse the new markup?

Blink!

I think that since Google forked Webkit things have only made it into Chrome to then appear later in the other browsers. But you never know.

They're in no hurry to encourage PWAs, it takes people away from the App Store which is how they get a substantial amount of money.