Css grid: how to make cell adjust in width?

user_6668871 0
Viewed 1897

I am using CSS grid display to layout a grid of items (can be cards, text, iframes, etc.) on the page, however sometimes an item in that list might be wider than the others, therefore overflow occurs. How may I fix this? I've noticed that in terms of height, columns actually adjust when there is more content without any problems with my current setup.

.wrapper-content {
 display: grid;
 grid-template-columns:repeat(auto-fill, minmax(11rem, auto));
 grid-auto-rows: minmax(12rem, auto);
 grid-gap: 1em;
}

Here's the problem, as you can see, an iframe is larger than the cards surrounding it and therefore it is covered. enter image description here

css-grid overflow css
2 Answers

I actually figured out how to achieve what I was looking for. We can set how many columns an item should span for. So for example if we have an iframe in a grid, perhaps we want it to span for 2 columns oppose to everything else spanning one column. To achieve that, we can create a class like so and then apply this class for iframe element:

.iframe-in-grid {
  grid-column: span 2;
}

If you want to make element bigger in terms of height, span it through rows like so:

grid-row: span 2;
user_66688710

You can set max-width for your images. Here is the code:

.wrapper-content img { max-width:100%}

If you are using a responsive layout, it is a must for your stylesheet file.

for the iframe or any other elements you need to change the grid system you can keep items next to each other with their original width by using this code:

.wrapper-content {
 display: inline-block;
 vertical-align:top;
}

or use flex .wrapper-content {display:inline-flex}

Also you can change the value of grid-template-columns property to auto so the size of the columns is determined by the size of the container and on the size of the content of the items in the column.

user_141646890
Related