flexible css grid tiles

Question

I was trying to remove the svg's without altering how the grid works.

The svgs are used to achieve an aspect-ratio of 1 for all tiles.

EDIT: Seems like there is a CSS Solution for this.

simply had to set aspect-ratio: 1 for my tiles.

This seems to be really new is there another solution for this other than using the svg hack?

body>div {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  min-width: 700px
}

div div {
  background: red;
}

<div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  <div><svg viewBox="0 0 1 1"></svg></div>
</div>

This question is not answered. Why did someone close this? – Conkuist Sep 14 '21 at 01:15 — Conkuist, Sep 14 '21 at 01:15

score 0 · Answer 1 · answered Sep 13 '21 at 23:58

0

You can scale, maintaining aspect ratio, by fixing the width and height to the same value. One way to do this is to use viewport width or height.

div
{
  width: 25vw;
  height: 25vw;
  max-width: 250px;
  max-height: 250px;
  background: red;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

answered Sep 13 '21 at 23:58

Liftoff

24,717
13
66
119

In your example the tiles don't change their size to fill the entire width of the page. – Conkuist Sep 14 '21 at 00:02
You were very vague in what the example was doing that you liked. They don't fill the entire width of the page either. Not always. Opening the snippet in your question leaves two tiles with a large portion of white space beside them. – Liftoff Sep 14 '21 at 00:03
2

I probably could have been more specific. – Conkuist Sep 14 '21 at 00:16

flexible css grid tiles

1 Answers1