How to create perfect squares in CSS which are fluid width (2 squares per row) on mobile?

Question

I have this:

Right now they are hardcoded to look decent on this specific size of iPhone. But how can I make the square scale proportionally to the screen/container size?

The div structure is not that simple, the square is actually inside of another container to do the layers above/below in that image. The div structure is this:

<div class="glyph-list">
  <div class="glyph-row">
    <div class="glyph">
      <div class="glyph-top">
        <a class="glyph-icon" href="/text/i">▶</a>
      </div>
      <div class="glyph-layer1">i</div>
      <div class="glyph-layer2">i</div>
      <div class="glyph-layer3">i</div>
    </div>
    <div class="glyph">
      <div class="glyph-top">
        <a class="glyph-icon" href="/text/a">▶</a>
      </div>
      <div class="glyph-layer1">a</div>
      <div class="glyph-layer2">a</div>
      <div class="glyph-layer3">a ɑ ä</div>
    </div>
    <div class="glyph">
      <div class="glyph-top">
        <a class="glyph-icon" href="/text/u">▶</a>
      </div>
      <div class="glyph-layer1">u</div>
      <div class="glyph-layer2">u</div>
      <div class="glyph-layer3">u</div>
    </div>
  </div>
</div>

The CSS is this:

.glyph-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 8px;
}

.glyph-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  flex-wrap: wrap;
}

.glyph {
  margin: 0px 16px;
  width: 192px;
  text-align: center;
  border-radius: 8px;
  cursor: default;
  margin-bottom: 32px;
}

.glyph-layer1 {
  font-family: ToneEtch;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 192px;
  background: #2a2a2a;
  font-size: 64px;
  padding: 48px;
  position: relative;
}

.glyph-layer2 {
  font-size: 32px;
  opacity: 0.5;
  padding: 16px;
  background: #2a2a2a;
}

.glyph-layer3 {
  font-size: 24px;
  background: #393939;
  opacity: 0.5;
  padding: 16px;
}

How do I get it so the square is proportional to the viewport (so 2 fit nicely per row), and yet the rest of the surrounding elements are laid out properly relative to each square?

How to create perfect squares in CSS which are fluid width (2 squares per row) on mobile?

0 Answers0