CSS Grid - Box inline table problems

HTML-CSS
#1

I’m using this inline box element to create a flexible box that may sometimes have more content dan it’s original size. Problem is that there are 1 or 2 other box element in the grid that need to move down only when the table expands it height. Now it kind off overwrites the other boxes. See example, when you change the browser to the smalles size you see the text overlapping other box elements.

This examples shows 1 box element with box box elements in it. There are in my project more box elements so it’s nesecary that alle boxes change position if box box is enlarged. I hope this is clear.

https://codepen.io/QDW/pen/mQQqmM

#2

Somebody any idea? :confused:

#3

I want to help you, but unfortunately I can’t properly understand what it is you are trying to fix. A bit more on how you want the boxes(and which boxes?) in the example to rearrange themselves when you change the browser size(width or height?) would help me get a better idea of what you are trying to achieve. Also, any images of the overlap and overwrites you mentioned will also help immensely.

#4

Sorry in the codepen example if you resize the browser pen to the smallest size possible. The text comes under the (yentl) box. That same box should always be at the bottom and the text should expand the css grid element and all elements below.

Hopefully this is a better explanation

#5

Sorry for the delay in answering. In an effort to solve to your problem I realized that I am out of depth when it comes to responsive css grids. Thank you for making me aware of my shortcomings.
But nonetheless I hope I can provide some help when it comes to the problem of overlaps. I think that with a bit of clever indentation of the div tags in the html code you can eliminate overlaps completely. By nesting related div tags (appearing in the same row or column) in a separate div you can limit the amount of disturbance an errant element can cause. Below I have linked a simplified pen of your example. Notice how the div tags in the html section are arranged. This ensures that the elements that matter (div tags with content) cannot escape their parent div tags(the one’s with top, middle and bottom classes) even in case of errors in css code.

Code pen example

Hope I could be of some help.

#6

This is causing the overflow

.dag {
  grid-template-rows: repeat(8, minmax(40px, 40px));
}

You should, for the most part, let content size things. It’s usually OK to set a min size in pixels but it rarely works for max sizes without causing an overflow at some point (at least for content that cannot be sized down, like text, as opposed to say an image). Instead of setting a fixed row hight let the content plus some padding and margin dictate the size.

A Codepen

Summary 
.dag {
  grid-template-rows: repeat(auto-fit, minmax(40px, 1fr));
}

Remove the grid-row placment on .item_cateraar, and give the content the padding and margin it needs/you want.

.item_cateraar {
  /* grid-row: -1 / -2; */
  padding: 8px; // up to you
}

.item_boodschap {
  margin-bottom: 60px; // up to you
}

.item_allergenen {
  padding: 10px 0; // up to you
}
#7

the codepen is acting weird