CSS Grid disappears in the Pro builder when you minimise the sidebar

Beta
#1

what it says in the title :wink:

this video explains it better

Thanks guys

#2

Thanks Scot! I see what’s happening there. We’ll get that fixed up.

Regarding those number inputs, I can elaborate (I’m sure it will help when there are some video tutorials and documentation). For the most part, we are just exposing CSS properties used by CSS Grid under the hood. Our Grid Editor is a great way to learn how CSS Grid itself works, since we’re not trying to be too much more than an abstraction on those concepts.

  • When a cell is “auto placed” (the number inputs are blank) it will seek to occupy the upper left most available space. The cells flow similar to columns in a row.
  • When you “place” a cell by moving or resizing it, the number inputs are populated with coordinates on the Grid.
  • For the X and Y Start/End fields, look at the grid and visualize the lines between the cells (like the gap area). Let’s say you entered 2 for X Start and 4 for X End. If you count those lines starting from the left (and including the outer edge) you would find that 2 lines inwards and you’ve reached the left edge of your cell. 4 lines inward and you’ve reached the right edge. Hopefully that makes sense - it’s definitely something that would be easier to communicate in visual form with screenshots and videos, so trust that the content is coming.
  • This is definitely more in the weeds, and not at all needed to use the Grid Editor but if you want to nerd out on grids like we often do, check this out take a look at this article: https://css-tricks.com/snippets/css/complete-guide-grid/ Our system works by letting you set grid-template-rows and grid-template-columns on the Grid itself (per breakpoint), and by setting grid-row-start, grid-row-end, grid-column-start, grid-column-end on the cells.
#3

Thanks, Much appreciate the explanation

Can I ask, how cell 2 is overlapping cell 1 in the Testimonial Block (CSS Grid example files)?
I have had a look and the grid col shows as 1fr 2rem 2fr, which makes sense to me, yet the cell 2 seems to have a -2rem margin applied (in old terms) and I can’t find that in the settings

#4

So if you inspect the Grid itself, you’ll see the template is 1fr 2rem 2fr. That means we have a 2rem column in the middle forming a little spacer. Cell 2 fills that space, but Cell 1 is configured to fill the first two columns - the large one, and the little 2rem one.

Try this:

  • Using the sortable in the Inspector, move Cell 1 down so it is second in the list.
  • Open the Grid editor, and you can resize Cell 1
  • Notice how you can snap into only the first position, or also snap to fill the small 2rem track as well.
#5

That makes perfect sense! Thank you… hadn’t spotted the column end 3 on the cell 1

#6

:thumbsup: You’re welcome!

1 Like
#7

Update: The issue in the view is fixed for beta2.

1 Like