Question 45948 in CSS Question posted in
Some basic documentation can be found here.

css grid with implicit rows and aspect-ratio problem

I’m trying to achieve a css grid with various squares that scrolls sideways:

https://codepen.io/flapusmog/pen/poOqrWa

The problem is that the aspect-ratio of the squares outside the original width gets squashed, and loses their proportions. It’s as if the width of the grid container doesn’t grow with it’s content. It seems to me that the width of the grid container is not expanding:

.grid {
  display:grid;
  grid-template-rows: repeat(3,auto);
  grid-auto-flow: column;
  grid-template-columns:repeat(auto-fit,30vh);
  height:100%;
  
/*   not working */
  width:auto; 
}

.cell {
  outline:1px solid red;

  height:100%;
  width:auto;
}

.content {
  aspect-ratio:1/1;
}

.c2 {
  grid-row:span 3;
  grid-column:span 3;
}

.c3 {
  grid-row:span 3;
  grid-column:span 3;
}

.break {
  grid-row-start: 1;
  font-size:30px;
}
<div class="grid">
  <div class="cell c3">
    <div class="content">
      hello
    </div>
  </div>
  <div class="cell c2">
    <div class="content">
      helo
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell break">
    <div class="content">
      sort of a title
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell c3">
    <div class="content">
      hello
    </div>
  </div>
  <div class="cell c2">
    <div class="content">
      helo
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>

</div>

The problem (happens at the edge of the original width limit)
Problem

how can i make sure they all stay square? Thanks!

Tags:

2

Answers


  1. 0

    I believe that you can resolve the problem by adding the aspect-ratio to the cells and not to the content.

    Login or Signup to reply.
  2. 0

    Add the following to your cell class:

    aspect-ratio: 1; 
display: flex;

    The aspect-ratio attribute forces every cell to be square, and the flex display keeps the content from overlapping on each other.

    You can also remove width:auto from .grid.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search