Iād be very happy with
āwe expect you to have a basic understanding of how css grid works, this video will explain how to implement that knowledge in the Blocs design environmentā.
I have a fair (not necessarily deep or in any way perfect) understanding of how Grid works and can do it with hand written stuff but find it tricky to coerce Blocs into doing it!
CSS Grid is listed as one of the major features on the Blocs home pages for both desktop and iPad versions, so it seems out of place not to have a single word of documentation for how this works.
Up to now, it has received very little attention on the forum, which I suspect is partly because few have managed to make any progress or even seen working examples showing what could be done with Blocs, so most have fallen back on old ways.
I would argue CSS Grid needs at least as much documentation as that given to working with columns and rows. As @PeteSharp said:
I gather a frequently mentioned competing product will soon ship with Tailwind CSS, together with a set of CSS Grid elements that will be simple and effective. I think we all want Blocs to stay ahead on these things.
We have just published this article on CSS Grid on the Blocs knowledge base. Itās intended for beginners with CSS Grid, so covers all of the basics and also includes some layout examples along with a sample project.
It covers moving grid children horizontally and vertically which is what I think your original question was regarding.
Anyway, Blocs now has some docs on CSS Grid 
We also have plans for a set of videos, hopefully before the end of the year.
This is a good start. As you said it is a beginnerās view, though it could use more work on terminology definitions. I need to play around with this more. I use grid almost exclusively when building my websites. However, frankly I gave up on Blocs because this implementation of CSS GRID just wasnāt flexible enough to justify learning how it works in Blocs. There are A LOT of capabilities within CSS GRID. I can only imagine building a UI into a WYSIWYG builder must be just this side of a nightmare. Bottom line thanks for the start! This will no doubt be helpful.
Iād be interested to know which terminology needs work IYO, by all means share feedback 
To startā¦ a better explanation of (fr) units and how they are manipulated. Iāll put a list together that helped me when I started.
In the mean time, this website has been really helpful to me.
Free learning:
https://gridbyexample.com/learn/
This is a paid tutorial but really good:
@Norm are explicit responsive grids with media queries possible in Blocs? Please see example here: Redefining Grid Areas with Media Queries
Nice work there @Norm.
I think there is enough information in the article to give a good overview.
People can look further for definitions of things like fr if they want too. Heck most people donāt know what rem and em units are. The article keeps focused 
@Monark is referring to grid-areas / grid-template-areas
Which is a pretty quick way of building a grid layout. It probably would need a visual editor where you can name areas to make it visually easier for users. Maybe next week @Norm 
@Norm, I discovered when using nested pages and clean URLS that forms fail.
Or it least it seems like that. Not using clean URLs the form works fine. 
This works
mydomain/contact/
This fails
mydomain/company/reviews
This has been ongoing with the stable build.
Ok got it, Iāll take a look.
I expect Monarch is referring to col & row templates. These are the bread and butter of CSS Grid.
On a basic level CSS Grid can create pretty traditional grids that can break out of the colum world, but CSS Grid can do so much more and add position of content on top of content, offset overlapping of content and replace the entire page layout. In addition you can put grids inside grids, etcā¦
Where Blocs still trips up, is that if you create a template with a comma such as minmax(20px, auto) 1fr 1fr; the edit view treats the content after the comma as the next column.
Also I notice that the Template boxes are too small to sview anything other than short templates
Any chance you could please share a screenshot of what you would expect vs what we currently get with the current system when using the code minmax(20px, auto) 1fr 1fr;?
The labels at the top of the columns are wrong. Maybe the comma used in the template triggers this.
The grid looks correct but the col labels are not correct. Also note that as the cols labels grow, there soon comes a point where the labels donāt have enough space for anything other than short simple template values such as 1fr. E.g. the label minmax(20px, auto) doesnāt fit.
I would be favour of an option to turn the col and row labels off or automatically turn them off when a template is used. Actually, the option perhaps should be to turn off all labels, draggable lines and handles when a template is used because they no longer make sense or apply. E.g. if you set a col to be minmax(20px, auto) and then drag that col handle, what should then be displayed in the label? When you use a template you donāt actually need anything other than the blank edit mode grid.
Thanks thats super helpful.
So the grid renders correctly, but the labels are misleading in the surrounding UI?
Yes correct.
Also, they donāt have enough room when using anything other than a small number of simple columns and would work better if optionally removed.
Iāll continue to improve and make these controls more flexible and get them to display the correct info in scenarios such as this. However, in beta 2 of V5.1.3 I have added a new position control option for grid which means you can build your own grids from scratch (without the Bric).
Grids built from scratch, will not display the visual controls, hereās an example.
That sounds like a really good solution. Looking forward to using this.
SWEET! Thank you for this!
Preview inspect brining anything up for this?
Ok Iāll check that.
