Overlay Flexbox Grid

HTML & CSS
1

I’m experimenting with a grid based on Flexbox, and although I’m pretty much satisfied with the result, I want to create the grid to see itself as an overlay above the layout, kind of like the grid settings are turned on in Photoshop, Sketch or other design software.

The problem I see is that, it turns out that when there is no content within the grid column, the grid column shrinks itself, so I can’t see the overlay grid (that is, the .grid__bit--visual class.)

At some point I managed to fixed that with setting flex-grow: 1, but then it forces my components within the grid columns to expand, so even if I set a smaller width on the component, it ignores it.

I really can’t catch where the problem might be. Any hints?

2

I have the feeling that somehow the position: fixed; set on the .grid--visual makes the problem, because once I remove it, it works, but then it doesn’t act as an overlay above the actual layout.

Here is the updated codepen.

3

Have you sided the fixed element?

e.g. use co-ordinates to define its size rather than width and height.

.grid--visual {
  position: fixed;
  z-index: 9999;
top:0;
bottom:0;
left:0;
right:0;
}
4

That actually worked. The position property should always go with setting at least 2 coordinates, if I remember well. Thank you!

5

Not exactly:)

Positioned elements are shrink to fit and have no width or height and are sized by their content.

You don’t need any co-ordinates if the element is to become absolute/fixed at the place it previously would have occupied on the flow but most times you would want to set a top and a left just to make sure its placed exactly in relation to your relatively placed parent.

If the element has a fixed height and width then you don’t need the other co-ordinates either. However when you want to size the fixed/absolute element to the dimensions of its parent you can simply use top,bottom, right and left at the same time and that creates the height and width for the element without needing to know the actual dimensions.

More often than not width:100% and height:100% would achieve the same effect for the absolute/fixed element but sometimes you may want to offset the element a little and in that case co-ordinates are far easier to manage.

As usual with CSS there are many ways of doing the same thing but the devil is in the detail :slight_smile:

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.