I have some text at a narrow width, with word-break: break-word and hyphens: auto. With normal flow display, the text wraps and stays within the boundaries of the container as I would expect. However, with CSS Grid, the text is allowed to escape the container and the word break happens at a different point.

This question already has answers here: How to get scrolling in a CSS grid? (4 answers) CSS Grid Layout- horizontal and vertical scrolling only for part of the content (1 answer) Cannot scroll within container using CSS grid-template (1 answer) Closed yesterday. body { overflow: hidden; margin: 0; } .container { display: grid; grid-template-columns: 1fr; […]

Closed 12 hours ago.

Closed 12 hours ago.

Closed 12 hours ago.

Closed 12 hours ago.

I’m laying out a 3×2 grid with an image, title and text in each cell. In cases where the text is shorter than others in the same row, it creates a white space at the top and the content moves down.

this is a picture of the issue I am currently coding a website for a client. This is a portfolio website to showcase their photography and im running into an issue with my layout. I have one div as my parent with the class of row on it then i have my picture elements wrapped in divs with the column class. The issue i seem to be running into is that the browser/HTML thinks my divs are bigger than they are and it is creating white space on the bottom of some of the columns. I have found one work around be it requires me to change the height of my images to 16% and have the object-fit set to cover but now the images are cut off and all the same size square. I was hoping somebody could point me in the right direction to get my divs to not add so much white space. i will provide my code and an image of the issue below.