レスポンシブでマージンのある正方形を作りたい

Question

前提・実現したいこと

正方形のdivを3つ並べて、なおかつその正方形がレスポンシブになるようにしたいです。

で、実現できたんですけど、正方形同士をくっつけたくなくてmarginを指定すると、正方形の比率が崩れて長方形になってしまいます。
(詳しくはcodepenをご覧下さい)

どうやったら、正方形同士がくっついていなくてかつレスポンシブな正方形が作れるのでしょうか？

codepen

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

div.wrap {
  display: flex;
  justify-content: start;
}

div.wrap div.box {
  width: calc(100% / 3);
  height: 0;
  padding-bottom:  calc(100% / 3);
  background-color: red;
  border: 1px solid black;
  margin: 10px; //←ここが問題
}

Answer 1

aspect-ratioがモバイルも含めメジャーブラウザの最新バージョンで対応し始めたので、そろそろ使い時です。

div.wrap div.box {
  width: calc(100% / 3);
/*  height: 0;
  padding-bottom:  calc(100% / 3); */
  aspect-ratio: 1; /* ←これだけで正方形になります */
  background-color: red;
  border: 1px solid black;
  margin: 10px; 
}

---

参考：

CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍 | コリス

CSS property: aspect-ratio | Can I use... Support tables for HTML5, CSS3, etc

Answer 2

width と padding-bottom の値を左右マージン(10px2)と左右ボーダー幅(1px2)の分だけ引いたものにすればいいでしょう。

div.wrap div.box {
  width: calc(100% / 3 - 22px);
  height: 0;
  padding-bottom:  calc(100% / 3 - 22px);
  background-color: red;
  border: 1px solid black;
  margin: 10px;
}

Comments

[yukarichang]

天才です。ありがとうございます。