質問編集履歴
1
解決内容を更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -48,4 +48,24 @@
|
|
|
48
48
|
・・・・省略部分・・・・
|
|
49
49
|
```
|
|
50
50
|
改善方法がご存じすれば、ぜひお教えてください。
|
|
51
|
-
よろしくお願いいたします。
|
|
51
|
+
よろしくお願いいたします。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### 2020/10/16追記
|
|
55
|
+
解決方法は見つけました。Columnを使います。
|
|
56
|
+
参考ですが、以下のように実装しています。
|
|
57
|
+
https://jsfiddle.net/z65ewsu0/
|
|
58
|
+
```CSS
|
|
59
|
+
.product-are-container {
|
|
60
|
+
columns: 3 280px;
|
|
61
|
+
column-gap: 1rem;
|
|
62
|
+
font-size: 1.2rem;
|
|
63
|
+
}
|
|
64
|
+
.category-wrapper {
|
|
65
|
+
display: inline-block;
|
|
66
|
+
width: 100%;
|
|
67
|
+
break-inside: avoid;
|
|
68
|
+
text-align: center;
|
|
69
|
+
font-weight: bold;
|
|
70
|
+
}
|
|
71
|
+
```
|