I really need to get better at using CSS Grid...
So let's start saving interesting tips!
Dynamic centered layout
How to have an image wider than the text, but still centered on all screens...
(from an article by Kevin Pennekamp via Dev Digest)
This is an article, with some text copied in...
As it says in the original article: with this solution you still need media-queries to use different side padding.
You could mitigate this by adding fluidity to your website. We can replace the 2rem with something like calc(1rem + 1 * var(--ratio)). By doing so, the side padding changes automatically when the screen size changes, without media-queries. Now we have a dynamic and maintainable layout for our articles.
Actually, it looks a bit silly on small screens, because I made the outer wrapper smaller to see the effect better. I'd need to add a media query to solve that 
- or get a lot better at using grid.
Responsive multi-column
I always try to achieve this with Flexbox, and not always with great success. So here's the Grid solution.
1
2
3
4
5
6
7
8
9
10
Again, not ideal, because of the width of the outer wrapper in Joomla. But you get the idea.
Card layouts
And then there's the cards... I actually need this right now, on another website. Let's try it.
This is the text that goes with the card. Filled with some longish text: In CSS grids, row and column definitions are ignored when there are not enough elements. In this example, when there are only enough elements to fill the first row, the 1fr definition of the second row is ignored.
This is the text that goes with the card. Filled with some longish text: In CSS grids, row and column definitions are ignored when there are not enough elements. In this example, when there are only enough elements to fill the first row, the 1fr definition of the second row is ignored.
This is the text that goes with the card. Filled with some longish text: In CSS grids, row and column definitions are ignored when there are not enough elements. In this example, when there are only enough elements to fill the first row, the 1fr definition of the second row is ignored.