2019年02月23日(土)

レスポンシブ対応のヘキサゴンブロックを使ったハニカム構造のグリッドレイアウト

• 0
• 2
• 8
• 21

Result

See the Pen Responsive Honeycomb Layout by kachibito
(@kachibito) on CodePen.

flexboxでハニカム構造なレイアウトです
ヘキサゴンブロックを並べてRWDに対応したもの

css

.honeycomb { display: flex; flex-wrap: wrap; list-style: none; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0; transform: translateY(34.375px); } .honeycomb-cell { flex: 0 1 250px; max-width: 250px; height: 137.5px; margin: 65.4761904762px 12.5px 25px; position: relative; padding: 0.5em; text-align: center;...