How do I keep the width and the height of cells the same using CSS Grid?

Question

I'm using auto-fill for the columns of my grid. But some times the width of the cells is greater than their height.

Is there a way to keep them squared? While the width increases the height also increases.

ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    grid-auto-flow: row dense;
    gap: 10px;
    padding: 10px;
}

ul li {
    background: salmon;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
<ul>

To illustrate my problem:

don't define grid-auto-rows, use the padding trick to keep the ratio — Temani Afif, Jun 30 '20 at 08:16

score 2 · Answer 1 · answered Jun 30 '20 at 05:27

2

I think, that you have to use just:

grid-template-columns: repeat(auto-fill, 100px);

instead of

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr);

answered Jun 30 '20 at 05:27

PredikDev

21
2

Good answer, but you better use Snippet tool to show the working example – focus.style Jun 30 '20 at 07:46
But it will create some gaps along the edge. I wish they can fill all the available space and also keep the aspect ratio. – Hao Wu Jun 30 '20 at 09:37

How do I keep the width and the height of cells the same using CSS Grid?

1 Answers1