グリッドレイアウトでレイアウト組んだ話

普段はバックエンドエンジニアとしてコードを書いているのですが、最近マークアップも担当領域になりがCSSも担当することがあります。そこで、勉強になることがあったので、記事にまとめておこうと思い、執筆しました。

概要

みなさん、下のレイアウトを組む時ってどうしますか？

そこで役立つのがグリッドレイアウトです。

mdnにはこう書いてあります。

グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。

正直これはめちゃくちゃ簡単にレイアウト組めます。
よっぽどのことがない限り、私はグリッドレイアウトでレイアウト組んでます。

完成形と解説

実際に私がグリッドレイアウトで組んだレイアウトがこんな感じです。
実際のコードは下に貼っておくので、気になる方は見てみてくださいください。

htmlはulタグで作っています。
組み方はとても簡単です。

display: grid
grid-template-columns

だけです。笑

grid-template-columns は引数に取った分だけ横並びになるので、今回は

grid-template-columns: repeat(2, 75px);

のようにしてあげて75pxを2回繰り返してあげれば良さそうです。
縦と横の間隔は

row-gap: 24px;
column-gap: 32px;

で取ってあげればOKです。

コード

index.html

  <div>
    <ul class="bullet-points">
      <li class="bullet-point">
        <p>test1</p>
      </li>
      <li class="bullet-point">
        <p>test2</p>
      </li>
      <li class="bullet-point">
        <p>test3</p>
      </li>
      <li class="bullet-point">
        <p>test4</p>
      </li>
    </ul>
  </div

styles.css

.bullet-points {
  display: grid;
  grid-template-columns: repeat(2, 75px);
  row-gap: 24px;
  column-gap: 32px;
}

.bullet-point {
  background-color: red;
  list-style: none;
}