質問編集履歴

1

解決内容を更新

2020/10/16 15:43

投稿

TruoG91
TruoG91

スコア7

test CHANGED
File without changes
test CHANGED
@@ -99,3 +99,43 @@
99
99
  改善方法がご存じすれば、ぜひお教えてください。
100
100
 
101
101
  よろしくお願いいたします。
102
+
103
+
104
+
105
+
106
+
107
+ ### 2020/10/16追記
108
+
109
+ 解決方法は見つけました。Columnを使います。
110
+
111
+ 参考ですが、以下のように実装しています。
112
+
113
+ https://jsfiddle.net/z65ewsu0/
114
+
115
+ ```CSS
116
+
117
+ .product-are-container {
118
+
119
+ columns: 3 280px;
120
+
121
+ column-gap: 1rem;
122
+
123
+ font-size: 1.2rem;
124
+
125
+ }
126
+
127
+ .category-wrapper {
128
+
129
+ display: inline-block;
130
+
131
+ width: 100%;
132
+
133
+ break-inside: avoid;
134
+
135
+ text-align: center;
136
+
137
+ font-weight: bold;
138
+
139
+ }
140
+
141
+ ```