Couple of screenshots

You can see a real example of usage in my blog skandar.dev/articles/obj...
and Sara Soueidan's blog (I borrowed this idea from her) www.sarasoueidan.com/blog/accessi...

Also you can read more in this MDN article developer.mozilla.org/en-US/docs/W...

When we name lines using "-start" and "-end" at the end of names, we can use shorthand of the name without "-start" and "-end" as in the code in the screenshot.

If we want to specify "grid-column" and "grid-row" at the same time we can use shorthand "grid-area".

In the code on the screenshot we want all "<img>" elements to fill the space of the columns from line "full-start" to line "full-end" and "<p>" from line "content-start" to line "content-end".

We can create invisible lines and give them names using [some-name] syntax. After that, we can use those named lines for specifying which columns/rows element should fill.

After that, you can use component in the *.mdx file without importing it, and the styles will be generated.

More complex example you can see in this PR: github.com/Skandar/skan...

Also there's Telegram channel (t.me/skandar_dev) where I'll publish links to my articles, interesting finds on the internet and my thoughts on them.