Search code examples
cssoverflowcss-grid

Css grid: how to make cell adjust in width?

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

Solution

  • 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;