@Norm could you do a small instructional or an extended academy video covering css grid in blocs?
1 Like
We could but like I said itās not likely to go very deep in a video that last a few minutes. CSS Grid training could be potentially hours to get a full understanding.
Also consider pretty much all online css grid training/knowledge from anywhere on the web can potentially be used in Blocs.
Itās likely our approach would be, ā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ā.
3 Likes
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!
1 Like
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.
2 Likes
Using āundoā and āredoā within the code widget makes Blocs crash. 
Crash report:
Exception Name: NSInvalidArgumentException
Description: -[__NSCFString substringWithRange:]: Range {142, 2} out of bounds; string length 17
User Info: (null)
0 CoreFoundation 0x00007ff81330b18a __exceptionPreprocess + 242
1 libobjc.A.dylib 0x00007ff812e3142b objc_exception_throw + 48
2 CoreFoundation 0x00007ff8133e53ca -[__NSCFString characterAtIndex:].cold.1 + 0
3 CoreFoundation 0x00007ff81328273a -[NSConstantDictionary objectForKey:] + 0
4 AppKit 0x00007ff81652c913 -[NSTextStorage(NSUndo) _undoRedoAttributedSubstringFromRange:] + 144
5 AppKit 0x00007ff816b787eb -[NSUndoTyping undoRedo:] + 142
6 Foundation 0x00007ff8141df677 -[_NSUndoStack popAndInvoke] + 186
7 Foundation 0x00007ff8141df3d7 -[NSUndoManager undoNestedGroup] + 299
8 AppKit 0x00007ff81652042c -[NSApplication(NSResponder) sendAction:to:from:] + 323
9 AppKit 0x00007ff81661006c -[NSMenuItem _corePerformAction] + 413
10 AppKit 0x00007ff81660fd79 -[NSCarbonMenuImpl performActionWithHighlightingForItemAtIndex:] + 142
11 AppKit 0x00007ff816658113 -[NSMenu performActionForItemAtIndex:] + 113
12 AppKit 0x00007ff816658099 -[NSMenu _internalPerformActionForItemAtIndex:] + 82
13 AppKit 0x00007ff816657ee1 -[NSCarbonMenuImpl _carbonCommandProcessEvent:handlerCallRef:] + 101
14 AppKit 0x00007ff8165f4a84 NSSLMMenuEventHandler + 990
15 HIToolbox 0x00007ff81ccecd3f _ZL23DispatchEventToHandlersP14EventTargetRecP14OpaqueEventRefP14HandlerCallRec + 1381
16 HIToolbox 0x00007ff81ccec188 _ZL30SendEventToEventTargetInternalP14OpaqueEventRefP20OpaqueEventTargetRefP14HandlerCallRec + 333
17 HIToolbox 0x00007ff81cd00ce5 SendEventToEventTarget + 39
18 HIToolbox 0x00007ff81cd5c95b _ZL18SendHICommandEventjPK9HICommandjjhPKvP20OpaqueEventTargetRefS5_PP14OpaqueEventRef + 361
19 HIToolbox 0x00007ff81cd80d4d SendMenuCommandWithContextAndModifiers + 46
20 HIToolbox 0x00007ff81cd80cf1 SendMenuItemSelectedEvent + 344
21 HIToolbox 0x00007ff81cd80b39 _ZL19FinishMenuSelectionP13SelectionDataP10MenuResultS2_ + 96
22 HIToolbox 0x00007ff81cd8154c _ZL14MenuSelectCoreP8MenuData5PointdjPP13OpaqueMenuRefPt + 625
23 HIToolbox 0x00007ff81cd81241 _HandleMenuSelection2 + 459
24 AppKit 0x00007ff8164bc535 _NSHandleCarbonMenuEvent + 215
25 AppKit 0x00007ff8164bc3a2 _DPSEventHandledByCarbon + 54
26 AppKit 0x00007ff81632d7af -[NSApplication(NSEvent) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 2919
27 AppKit 0x00007ff81631f788 -[NSApplication run] + 586
28 AppKit 0x00007ff8162f39a1 NSApplicationMain + 817
29 dyld 0x00007ff812e5e41f start + 1903
1 Like
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.
7 Likes
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.
1 Like
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 
4 Likes
@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.
1 Like
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
4 Likes
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.
5 Likes
That sounds like a really good solution. Looking forward to using this.
2 Likes