Recently, I ended up on this article.

I was quite impressed. I didn't know you could use the CSS Grid to make a layout. And even more, that you could use it to make an easily "breakable" layout.

With subgrid and naming your column lines, you can easily break the layout and have a full width element.

Just like this one:

The whole concept is super easy. I'm gonna describe what I did on this website.

First, I have the grid of the main element:

grid-template-columns:
  [inline-start]
  auto
  [margin-start]
  2rem
  [main-start]
  min(40rem, 100%)
  [main-end]
  2rem
  [margin-end]
  auto
  [inline-end];
grid-template-rows: auto;
align-content: start;

Now, as per the article, I add this rule to make sure every children elements use the main grid-column. Like so:

main > * {
  grid-column: main;
}

Everything is centered, and it's beautiful. And to break free from those column, it's easy. You add a simple class with a subgrid and you're done. Just like above:

.full-width {
  display: grid;
  grid-column: inline;
  grid-template-columns: subgrid;
}

But here comes a new challenger. All my generated content from my posts are outputted inside a div with "html-content" class. And this prevents me from using any full-width elements as those elements will be children of the div.html-content and not of the main element.

So I added a rule to .html-content:

.html-content {
  display: contents;
}
.html-content > * {
  grid-column: main;
}

This allows me to have the full-width elements like this one:

What does display: contents does? I don't know yet. I guess that's for another day, but it removes the element from the grid layout by creating some kind of content layout?

I'll have a look tomorrow and will keep you updated.