-
Hi,
Playing around with the CSS grid functionality in Generateblocks (Display grid).Have some questions about it:
1. Is there some documentation about the CSS grid functionality in Generateblocks (Display Grid)?
2. Noticed I can set grid template columsn and grid template rows. But how do I span a block on multiple cells? See image example.Span block on multiple cells:
I know that I do that with custom css (see css below) but is built in into Generateblocks natively? How do I do that? And if not, are there plans to built that in (and maybe some more userfriendly way to like visually drag and drop design grids)?
Custom css:
.item1 { grid-area: 1 / 1 / 2 / 3; } .item2 { grid-area: 1 / 3 / 3 / 5; } .item3 { grid-area: 2 / 1 / 3 / 2; } .item4 { grid-area: 2 / 2 / 3 / 3; } -
Hi there,
1. It’s a CSS builder, so it’s the same as Grid CSS. Here’s a guide for you:https://css-tricks.com/snippets/css/complete-guide-grid/
2. You can create a sub global style, something like this:
https://app.screencast.com/9qF4xUbx2zR4sSo you apply the global style for the parent container, then edit the global style, click the More button, click the +New button, you can create a new parent selector, in my example, I created a sub selector with class
grid-1-1, then you can see the global style selector changes to.css-grid .grid-1-1, then you can define the row and column for the sub global style selector.Hope that’s clear.
-
Nice that this can be done in Generateblocks.
One question about subselectors. Should the subselector be set to Display Grid? What is the Default option in this case?
-
No, the child of the Grid does not have to be
display:grid.Just like the child of a flex container does not have to be
display:flex.What is the Default option in this case?
If the display property is not specified in CSS, the default value depends on the element itself. Each HTML element has a default display value defined in the CSS specification.
Some common default display values for HTML elements include:
–
blockfor elements like<div>,<p>,<header>,<footer>,<section>,<nav>,<article>, etc. These elements typically start on a new line and take up the full width available.–
inlinefor elements like<span>,<a>,<strong>,<em>,<img>,<input>, etc. These elements don’t start on a new line and only take up as much width as necessary.–
inline-blockfor elements like<button>and<select>. These elements behave like inline elements but can have a width and height specified. -
Thanks. Interesting, nice to learn some new things.
-
You are welcome 🙂
- You must be logged in to reply to this topic.