gridレイアウトへの置き換え

by interlife

HTML

<ul class="grid-container">
  <li>パネル 1</li>
  <li>パネル 2</li>
  <li>パネル 3</li>
  <li>パネル 4</li>
  <li>パネル 5</li>
  <li>パネル 6</li>
  <li>パネル 7</li>
</ul>

SCSS

ul {
  /* Gridレイアウトの設定 */
  display: grid;
  /* 1. 横幅23.5%の列を4つ作成 */
  grid-template-columns: repeat(4, 23.5%);
  /* 2. 合計94%（23.5%×4）の残りの余白を、列間に均等配分（flexのbetweenと同じ挙動） */
  justify-content: space-between;
  /* 3. 上下の余白（行間）を指定 */
  gap: 40px 0;
}

li {
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}