実現したいこと
boxの改行位置を指定して、中央揃えで並べたい
発生している問題・エラーメッセージ
cssとhtmlで、13個のboxを改行位置を指定し、かつ中央揃えにして並べたいです。イメージとしては下記の画像のように並べたいです。
flexboxで空のboxを追加する方法だと左に寄ってしまうし、gridレイアウトだとgrid-column-startで最後の行は画像のようにできましたが、小数点が指定できないため最後から二列目が中央揃えになりません。それ以外でも構いませんので、何かいい方法はないでしょうか。お力添えいただけると嬉しいです。
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4<meta charset="utf-8">5<title>テスト</title>6 7<meta name="viewport" content="width=device-width,initial-scale=1.0">8 9<link rel="stylesheet" type="text/css" href="css/style.css">10</head>11 12<body>13 14 <div class="member">15 <div class="member-wrapp">16 <div class="member-wrapp-box">17 <p>test</p>18 </div>19 <div class="member-wrapp-box">20 <p>test</p>21 </div>22 <div class="member-wrapp-box">23 <p>test</p>24 </div>25 <div class="member-wrapp-box">26 <p>test</p>27 </div>28 <div class="member-wrapp-box">29 <p>test</p>30 </div>31 <div class="member-wrapp-box">32 <p>test</p>33 </div>34 <div class="member-wrapp-box">35 <p>test</p>36 </div>37 <div class="member-wrapp-box">38 <p>test</p>39 </div>40 <div class="member-wrapp-box">41 <p>test</p>42 </div>43 <div class="member-wrapp-box">44 <p>test</p>45 </div>46 <div class="member-wrapp-box">47 <p>test</p>48 </div>49 <div class="member-wrapp-box">50 <p>test</p>51 </div>52 <div class="member-wrapp-box">53 <p>test</p>54 </div>55 56 </div>57 58 </div>59 60</body>61</html>62
css
1.member {2 padding: 3% 0;3 background-color: #ccc;4}5.member-wrapp {6 width: 90%;7 margin: 0 auto;8 max-width: 1280px;9 position: relative;10 display: grid;11 grid-template-columns: repeat(4, 1fr);12 gap: 24px 40px;13}14.member-wrapp-box {15 width: 228px;16 height: 370px;17 overflow: hidden;18 background-color: white;19 position: relative;20 margin-left: 3%;21 margin-bottom: 5%;22}23.member-wrapp-box:nth-child(12n) {24 grid-column-start: 2;25}26
試したこと
現在はgridレイアウトで最後の行だけ中央揃えになっている状態です。
0 コメント