How to remove the extra space appearing in Firefox with css grid & subgrid?

Question

I've made a layout which works in Chrome but not Firefox. In Firefox each grid item has a lot of internal space. I've tried a lot of the obvious stuff, but I can't see what the cause of the space is in developer tools. Also it's not clear why Chrome & Firefox are interpreting it so differently. Is there a solution that can render the same in both browsers (ideally without any browser sniffing / separate code for each)

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "IBM Plex Sans";
  line-height: 1.33;
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 5px; 
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  margin-top: 2rem;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: span 2;
  grid-row: span 2;
  gap: 1rem;
}

<div class="container">
  <article class="card">
    <img src="https://placehold.co/800x800" />
    <h2>Veniam voluptate ad consequat</h2>
    <p class="text">Fugiat officia sit exercitation nostrud commodo dolore quis ut nostrud non sed cupidatat ea veniam deserunt nulla aliqua eu esse</p>
    <p class="link"><a href="#0" class="button">Duis do amet</a></p>
  </article>

  <article class="card">
    <img src="https://placehold.co/800x800" />
    <h2>Ipsum adipiscing minim velit nulla culpa elit velit</h2>
    <p class="text">Adipiscing eiusmod ipsum excepteur commodo veniam dolore proident ex consequat eiusmod ea aliquip proident nulla ipsum amet consectetur lorem consequat exercitation cupidatat excepteur anim consectetur laboris eiusmod qui eiusmod sunt duis laboris culpa minim ex nostrud do nostrud pariatur excepteur</p>
    <p class="link"><a href="#0" class="button">Veniam ea ea sint</a></p>
  </article>

  <article class="card">
    <img src="https://placehold.co/800x800" />
    <h2>Excepteur occaecat eiusmod</h2>
    <p class="text">Mollit proident do dolore cupidatat fugiat minim do ad occaecat ad occaecat consectetur excepteur commodo nostrud ad incididunt consequat eu excepteur proident officia est consequat velit nostrud laboris minim sunt esse pariatur labore non reprehenderit magna sint et laboris laboris minim nostrud lorem elit anim commodo aute proident est anim velit est consequat ad velit do do exercitation proident culpa commodo pariatur qui cupidatat est duis qui elit eu minim id ex cupidatat est ex cupidatat cillum ad et aliqua</p>
    <p class="link"><a href="#0" class="button">Adipiscing culpa</a></p>
  </article>

  <article class="card">
    <img src="https://placehold.co/800x800" />
    <h2>Enim aliqua quis eu mollit nulla</h2>
    <p class="text">Duis aliqua nulla reprehenderit lorem cillum pariatur ad sit qui sint laboris enim ipsum tempor irure quis nisi elit tempor officia nisi irure officia incididunt occaecat reprehenderit nostrud fugiat eu</p>
    <p class="link"><a href="#0" class="button">Laboris aliquip ipsum</a></p>
  </article>
</div>

Sid · Accepted Answer · 2025-06-27 07:34:04Z

2

In the .card CSS selector, do this:

.card {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(2, auto);
    grid-column: span 2;
    grid-row: span 2;
    gap: 1rem;
}

This forces the row template to be repeat(2, auto) instead of inheriting from the parent.

I'm not sure why, but maybe firefox inherits not only the template code (i.e. "repeat(2, auto)") but also the spacing/size of the parent grid. so changing "subgrid" to repeat(2, auto) fixes it.

answered Jun 27 at 7:34

Sid

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alxrb Jun 28 at 6:15

Thanks for the answer. It definitely makes the layout work, and keeps the aligned rows, but this is down to the uniform square images. If these are removed from the HTML (or given unique different heights), the rows aren't aligned. I'm trying to learn subgrid and it's intricacies, so I would like a solution that uses subgrid to align the row content.

Collectives™ on Stack Overflow

How to remove the extra space appearing in Firefox with css grid & subgrid?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related