CSS Grid was introduced in Blocs5, so I thought the seasonal break might a good time to stimulate curiosity and illustrate what it is and what can be achieved withCSS Grid.
A great way to do this is to watch some of Jen Simmons many excellent videos introducing CSS Grid. Her videos are amongst the easiest to understand and as well as being an excellent communicator.
How much of this could be easily achieved right now in Blocs using CSS Grid? Are there any fixes that need to be added?
I tried experimenting with CSS Grid at the weekend and struggled a bit. I couldn’t change the order of two items at a specific breakpoint and I found very little discussion on the forum so far.
The example I linked to above uses the CSS Grid feature that allows template areas to be named using meaningful names such as sidebar, footer, text, image, etc… It is a great feature of Grid and very useful, but that isn’t currently implemented in Blocs5. I hope it will be.
However, I would have built, actually building that layout now (but not in Blocs5) using a normal row and template definition such as repeat(14, 1fr
Unfortunately that also doesn’t exist in Blocs5 (I hope yet) and using the Grid bars in the Grid Edit mode is too basic, would not permit it. E.g. grid-template-columns: repeat(14,minmax(0,1fr)) is required.
Overall, Blocs5 needs a place to enter normal row and col templates that would be reflected in the Grid edit view as they are show in Firefiox Inspector, and replace the Grid Item End with Grid Item Span.
Then that type of Grid and the whole entire world of Grids could be built iin Blocs5.
Has anyone gotten any further with the Blocks 5 / CSS Grids ? I am starting a new web job with an old school print designer. He has sent me a design that is intended for grids. Any pointers / info’s ? Is Blocs far enough along ?
Not significantly as far as I can tell. It is rarely mentioned on the forum, which suggests users have largely given up for the time being.
That’s a real pity, since it was supposed to be one of the major features of Blocs 5 and could have opened the door to more modern dynamic designs with an intuitive workflow.
You have to use the grid within a bloc, where as grid is really able to structure the entire page, which could be the case you have?
We don’t have things like grid template areas etc, for content positioning, which is an amazing feature of grid layout.
It keeps to the basics, which does have its use cases when not using flex. Which could be an alternative depending on the design. You still have to think in terms of blocs. Unless you put everything in one bloc, which I wouldn’t. Not until we can have global or linked elements (like other builders) outside of the global header and footer, anyway.
I have used grid at times in Blocs. But obviously not for the whole page, just various section where it was better than using flex. In other apps I have done the entire page layout. I’m building a WP theme right now that uses grid template areas for the various page layouts.
So I think the answer is, think in terms of blocs if using Blocs and how you might be able to replicate the design using other techniques, it’s most likely doable.
