I might have missed it (and yes I know Elder made a basic tutorial on CSS Grid in Blocs), but how would I have things overlap in CSS Grid for Blocs?
You need to understand the concept of overlapping first and then the implementation of CSS Grid used in Blocs which requires defining a start and an end position, instead of a start and span setting.
Essentially, if you want to overlap something, e.g. in 1 row, you define 3 columns and then put the thing to overlap in col 1 row1 and set it to span 2 columns (in Blocs terms to span to col3, i.e. fill 2 columns) and also increase it’s z-index by 1, so that it appears on top of the second thing.
Then the second thing then starts at col2 and ends at col4, i.e. spans 2 cols.
How to define the coll template can be done many ways but the simplest could be 1fr 1fr 1fr. the beauty of thi sapproach once you understand the different ways that cols templates can be defined, is that the overlap can be controlled tightly to ensiure the whole layout behaves perfectly at all sceen widths. Adjust the middle col to make th effect work.
The BBC site uses this effect throughout it’s design to great effect.
In the layout above, the text is in Col1 Span1, with the image Col2 Span2. An overlay colour is in Col2 Span1 to overlay the image.
1 Like
Here is a short tutorial by the excellent Jen Simmons about Overlapping page layouts and where it fits into web/graphic design. If you are new to overlapping layouts then this would be valuable to watch.
1 Like
Thanks Gary, I know the basics. Might need to refresh them, since I kinda struggle to achieve that using the built in CSS Grid functionality in Blocs…
IMHO it is much harder that it could be. The approach used in the Stacks Source implenentation is more conventional and far easier to learn and use in my experience.
Blocs having CSS Grid Support is a massive feature and I would have expected a great deal more discussion about it here.
I’d say that’s because a lot of users don’t know what they can do with it yet.
I was going to made a video on it. But decided to wait for Norm to develop it a bit more (this was the early days).
Maybe you could do some examples?
I had a go with it early on and hit some problems. It could have been showcased better as well. If I go to Blocs documentation and search for CSS Grid I cannot find any guidance showing how it works.
1 Like
Worth having a look in the standard documentation:
1 Like
I do certainly intend to creat some examples.
There is still a bit of work for Norm to do in the current beta with the row and col labels in edit mode when you enter a row or col template that contains commas (very common requirement). If you add a template such as repeat(4, minmax(200px, 1fr)) then it breaks the labels.
1 Like