gridで2行目だけセンター揃えにできますか？

Question

お世話になっております。
cssのgridを使用して、2行目だけセンター揃えにはできますでしょうか。

参考として、下記の2行目の「枠広告」「営業資料」の要素が中央揃えになるようにです。

display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 10px 90px;
-webkit-column-gap: 10px;
column-gap: 10px;

grid-template-columns: repeat(5, 1fr);　と指定しているため、
1行目と2行目で大枠のくくりを変更しないと無理でしょうか？
案がありましたらご教示をお願いしたいです。
よろしくお願いいたします。

Answer 1

その仕様なら、FlexBoxの方がいいでしょう。

<div class="wrapper">
  <div>aaa</div>
  <div>bbb</div>
  <div>ccc</div>
  <div>ddd</div>
  <div>eee</div>
  <div>fff</div>
  <div>ggg</div>
</div>

.wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.wrapper > div {
  background-color: aqua;
  flex: 0 0 calc(20% - 10px);
}

Comments

[takamiii_158cm]

うまくいきました！ありがとうございます。