グリッドメニューのレイアウトのソースコード

ヘッダー下にありそうなメニューのレイアウト

レイアウト一覧ページへ

html

<div id ="menus">
<a class="item">HOME</a>
<a class="item">HTML</a>
<a class="item">CSS</a>
<a class="item">JS</a>
<a class="item">PHP</a>
<a class="item">JQuery</a>
<a class="item">SQL</a>
<a class="item">SVG</a>
</div>

css

#menus {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(120px, 1fr));
  grid-template-rows: 50px;
  grid-auto-rows: 50px;
  grid-gap: 2px;
}

.item {
  background:#ffcc99;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media screen and (max-width: 900px) {}