gridでよくあるヘッダーの作り方

2023年7月31日

2023年8月4日

webのこと

gridを使うと、今までposition: absoluteを使わないと作りずらかったレイアウトや、
divで囲わないと工夫しないと、配置しずらかったレイアウトなどが作りやすいです。

レイアウトする際のやり方の候補して、覚えておくと良いかなと思います。

共通HTML

<div class="header">
 <h1 class="title">Title</h1>
 <ul class="gnav">
  <li class="gnav-item"><a href="">menu1</a></li>
  <li class="gnav-item"><a href="">menu2</a></li>
  <li class="gnav-item"><a href="">menu3</a></li>
 </ul>
</div>

共通gnav CSS

.gnav {
  grid-area: gnav;
  display: flex;
  gap: 12px;
  justify-content: end;
  width: 100%;
}
.gnav-item {
  list-style-type: none;
}
.gnav a {
  padding: 16px;
  display: grid;
  height: 100%;
  align-items: center;
  background-color: rgba(255,255,255, 0.2);
  transition: background-color 0.1s ease-in;
  border-radius: 8px;
  cursor: pointer;
}
.gnav a:hover {
  background-color: rgba(255,255,255, 0.1);
}

共通ヘッダーCSS

.header {
  margin: 0 0 16px 0;
  padding: 16px;
  background-color: #333;
  color: #fff;
  display: grid;
}

タイトル中央寄せのCSS

.header {
  grid-template:
   ". title gnav" auto / 
   1fr auto 1fr;
}

.title {
  grid-area: title;
  padding: 16px;
  place-self: center;
  font-size: 20px;
}

grid-templateを使い、1行3列のgridを作成しています。
grid-areaを使い真ん中にtitle、右側にgnavを表示するようにしています。

このようにすることで、titleの配置を画面の中央寄せにしつつgnavを右側に持ってくることができます。
従来では、gnavをposition: absolute;で右上に持ってくるなど、工夫する必要がありました。

タイトルとナビゲーションを合わせて最大幅をきめて中央寄せ

.header {
  grid-template:
    ". header gnav ." auto / 
    1fr minmax(auto, 700px) minmax(auto, 300px) 1fr;
  place-items: center start;
}

.title {
  grid-area: header;
  padding-right: 16px;
  font-size: 20px;
}

titleとgnavを合わせて中央寄せにしたい場合HTMLを変更して、titleとgnvをdivで囲ってあげれば、工夫せずともできるかとは思いますが。
わざわざdivで囲わずとも、1行4列のgridを作成して、真ん中二つの足した値を最大幅になるように設定することでレイアウトを再現することができます。