1

I know that there are a few existing questions about aspect ratio CSS grid, but none explain my issue.

I have a grid that scales at some aspect ratio. Some cells will be filled with content in future, as an example I filled some cells with image:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.167fr 0.45fr .225fr 0.3fr 0.8fr;
  grid-template-rows: 0.44fr 0.1875fr 0.4fr .9fr;
  grid-gap: 2vw;
}

.grid figure {
  background: #eee;
}
.grid figure img {
  width: 100%;
  height: 100%;
}

.grid figure:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
<div class="grid">
    <figure>
      <img src="https://picsum.photos/id/237/200/200" />
    </figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
 </div>

Which works great (Run Code Snippet -> open Full Page -> resize browser to test).

Now, if I replace the image in the first <figure> the layout breaks. Even though image size did not affect grid size (as img has width:100%;height:100%).

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.167fr 0.45fr .225fr 0.3fr 0.8fr;
  grid-template-rows: 0.44fr 0.1875fr 0.4fr .9fr;
  grid-gap: 2vw;
}

.grid figure {
  background: #eee;
}
.grid figure .test-element {
  width: 100%;
  height: 100%;
}

.grid figure:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
<div class="grid">
    <figure>
      <div class="test-element">Test</div>
    </figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
 </div>

Why does it work with img but doesn't work with other element?

Marvin3
  • 5,741
  • 8
  • 37
  • 45
  • try inserting a long text there https://jsfiddle.net/L3gh2nwk/ note that as you don't have *height* specified to the *grid container* and your `grid-template-rows: 0.44fr 0.1875fr 0.4fr .9fr` deals with *fr* units, the *grid layout algorithm* defines heights that maintains those proportion of heights... see another effect here: https://stackoverflow.com/questions/55103671 – kukkuz May 05 '19 at 07:37
  • @kukkuz , unfortunately, if I add text like like you suggest - the grid no longer scales at specific aspect ratio. But even if I add 1x1 image - it does. – Marvin3 May 05 '19 at 07:43
  • the grid doesn't scale but you can see the height of row increasing *proportionally* - that is what I'm pointing to... – kukkuz May 05 '19 at 07:45
  • you are setting 100% width & height to the `img`, but this 100% is actually is *only* defined proportionally as the height is not defined for the *grid container* - that is why you see this behavior.. – kukkuz May 05 '19 at 07:47

0 Answers0