CODEWITHSUNDEEP
htmlcsscross-browsercss-gridaspect-ratio
mvinicius2k
mvinicius2k

Reputation: 9

Aspect ratio inside grid display works different in Chrome and Firefox

Using grid layout and setting aspect ratio for some child is not calculated correctly in Firefox, the column does not expand and the child overlaps that column.

<div class="parent">
    <div class="image"></div>
    <div class="textA">Text A</div>
    <div class="textB">Text B</div>
</div>

.parent{
  width: 300px;
  height: 100px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}

.image{

  height:100%;
  aspect-ratio: 1;
  background-color: blue;
  grid-row: span 2 / span 2;
}

.textA{
  font-size:1.5rem;
  background-color: gold;

}

.textB{
  font-size:1rem;
  background-color: violet;

}

https://jsfiddle.net/qsuten2L/3/

This will work differently in Chrome and Firefox.

The behaviour in Chrome is what I want

Upvotes: 0

Views: 51

Answers (1)

A Haworth
A Haworth

Reputation: 36605

Both Chrome and FF now recognise container queries and the associated units.

This snippet doesn't try setting the height but sets the width to 100cqh (the container height).

<style>
  .parent {
    width: 300px;
    height: 100px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    container-type: size;
  }

  .image {
    width: 100cqh;
    aspect-ratio: 1;
    background-color: blue;
    grid-row: span 2 / span 2;
  }

  .textA {
    font-size: 1.5rem;
    background-color: gold;

  }

  .textB {
    font-size: 1rem;
    background-color: violet;

  }
</style>
<div class="parent">
  <div class="image"></div>
  <div class="textA">Text A</div>
  <div class="textB">Text B</div>
</div>

Upvotes: 0

Related Questions