I have upgraded to Blocs 5 Plus which is another significant step forward - great work Norm!
Has anybody played with Grid yet? I am struggling to undestand the implementation a little. I can create a grid, adjust rows and columns but cannot seem to find an obvious way to put elements into the grid which go beyond just a single cell. Any basic help would be much appreciated. Hopefully, once Norm and Helen have recovered from the stress of the launch they might give some priority to a basic tutorial on the Grid?
1 Like
yes, +1 for a tutorial from one of the experts!
1 Like
There’s a great explanation about CSS grid here:
An introduction to FR units and how they work can be found here:
2 Likes
Hi Jerry,
Thanks. I am familiar with CSS Grid and implementations in other apps (e.g. Pinegrow). I am looking for more info on the Blocs 5 implementation specifically. (for example how to make elements extend beyond a single column and/or row or make items overlap). The CSS editor seems to have the sort of options I would expect but I cannot make them work properly.
Really looking forward to reading more about this. I see from your screen shots that there is no standard span as such, and instead there is a start and end. Interesting, and I suspect this is what Bootstrap alude to as part of the “CSS Grid with a Bootstrap Twist”. The Bootstrap CSS Grid docs, if this is what is used, appears to refer to Bootstrap CSS Grid to be based around a standard looking max 12 column layout with equal width columns.
Do you know if it is possible to define a grid using the standard CSS Grid parameters for both a col and row?
1 Like
Doesn’t look like it’s restricted to just the 12 Bootstrap columns. I find it a bit tricky though, do adjust the width and height. Especially the heigh. Wish there’d be options in the right columns for that too.
1 Like
That’s very helpful. Thanks.
Normally you woudl either add content to a grid-item to set the height or set a grid-item to be a max height. 1fr will be meaningless until you set a height and width.
Thanks Jerry, I didn’t have the time to dive in.
1 Like
Hi @Jerry. Very many thanks for spending time to illustrate how to make the Grid work. I have managed after a couple of tries to replicate what you did although it seemed to be a bit sensitive to the order of events. I also noticed that the cell based div containers that are automatically added seemed to get pushed around which I did not expect. I have attached a screenshot which I hope shows this Is that something you noticed.
Many thanks again. Your efforts have got me past my mental roadblock which I had not managed to reset!
John
1 Like
Looking for some guidance Flex aligning content in a grid. If I set the grid container to a min height of say 500px or individual grid items to 500px min height and then add content such as a header (with a height less than 500px), I can’t get the flex align to work.
Im very familiar with CSS Grid and flexbox but none of the many methods I tried, work. I feel I must be missing something here.
I forgot to update this, but I figured out the my Flexbox issues were more to do with a few rougue settings that I had made, which I couldn’t see, that were interferring with what I was trying to do.
However, regarding CSS Grid, I gave up on Grid bric and I have been using the Div Container Bric as a Grid Container and other Div Container Brics as the Grid Items and a few lines of tempate code, I am very pleased with the CSS Grids I can build, although you do need to understand basic CSS Grid code to do this. Using this method, you do lose the WYSIWYG edit layout display for the CSS Grid you are building, but for anything but the simplest of grids, I find this a big advantage, that displays the Grid Items stacked in a column RW Stacks style. This allows you to see the items heights if you are setting any, and also allows you to see Grid Items that dissapear under each other.
However, I know it’s early days, but I do find the Grid Bric a big challenge.
So wondering how others are getting on with the Grid Bric?
1 Like
A video tutorial will come in handy
1 Like
I really just digging into this, but it seems that the grid bric is pretty rudimentary and doesn’t offer too many options, as I am having to write css tags for every item in the grid
1 Like
Agree 100%
Early days for the feature. Norm has mentioned he has more coming.
2 Likes