CSS Gridを使ったおしゃれなレイアウトの解説

このコードでは、CSS Gridを使用して複雑なレイアウトを作成し、要素をおしゃれに配置しています。特に、grid-template-areasを使ってボックスを柔軟に配置し、レイアウトの調整を行っています。また、レスポンシブデザインにも対応し、画面幅に応じてレイアウトが自動的に変化します。

1. HTMLコードの全体構成

まず、今回使用するCSSコードは以下の通りです。

<style>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.wrapper {
  width: 100%;
  display: grid;
  grid-template: repeat(4, 8vw) / repeat(3, 1fr);
  gap: .6rem;
  grid-template-areas:
    "box1 box2 box2"
    "box1 box3 box5"
    "box4 box3 box5"
    "box4 box3 box6";
}
.box {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.box1 {
  grid-area: box1;
  background-color: red;
}
.box2 {
  grid-area: box2;
  background-color: green;
}
.box3 {
  grid-area: box3;
  background-color: blue;
}
.box4 {
  grid-area: box4;
  background-color: yellow;
}
.box5 {
  grid-area: box5;
  background-color: gray;
}
.box6 {
  grid-area: box6;
  background-color: pink;
}
@media (max-width: 768px) {
  .wrapper {
    grid-template-areas:
      "box1 box2 box2"
      "box1 box3 box4"
      "box6 box3 box4"
      "box6 box5 box5";
  }
}
</style>
<div class="container">
  <div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
  </div>
</div>

2. 各プロパティの解説

  • display: grid;: グリッドレイアウトを使用して、要素を縦横に配置します。
  • grid-template: 4行×3列のグリッドを作成しています。行の高さは10vw(ビューポートの幅に応じた高さ)で、列は均等に分割されています(1frは利用可能なスペースを均等に割り当てます)。
  • grid-template-areas: グリッド内で、どのエリアにどのボックスを配置するかを指定しています。例えば、"box1 box2 box2"は1行目の左端にbox1、右側の2列分にbox2が配置されます。

3. ボックスの配置

.box1 {
  grid-area: box1;
  background-color: red;
}
.box2 {
  grid-area: box2;
  background-color: green;
}
.box3 {
  grid-area: box3;
  background-color: blue;
}
.box4 {
  grid-area: box4;
  background-color: yellow;
}
.box5 {
  grid-area: box5;
  background-color: gray;
}
.box6 {
  grid-area: box6;
  background-color: pink;
}

各ボックスにgrid-areaを指定することで、grid-template-areasで定義された場所に配置されます。例えば、box1grid-area: box1として、赤い背景で1列目に表示されます。

4. レスポンシブ対応

画面幅が768px以下のときにレイアウトを変更しています。

@media (max-width: 768px) {
  .wrapper {
    grid-template-areas:
      "box1 box2 box2"
      "box1 box3 box4"
      "box6 box3 box4"
      "box6 box5 box5";
  }
}

@media (max-width: 768px): 画面幅が768px以下のときにグリッドのレイアウトを変更します。

grid-template-areasが変わり、ボックスの配置が異なるレイアウトに切り替わります。例えば、box6は通常時は右下に配置されますが、画面が小さくなると2行目や3行目にも登場するように設定されています。

5. グリッドによる自由なレイアウト

このコードでは、CSS Gridを使って複数の異なるサイズのボックスを効率的に配置しています。grid-template-areasを使うことで、視覚的にわかりやすいレイアウトが簡単に実現でき、各ボックスの位置を明示的に定義できるのが特徴です。

6. まとめ

このようなCSS Gridを活用したレイアウトは、複雑なデザインをシンプルなコードで実現でき、特にレスポンシブデザインに強いです。grid-template-areasを使うことで、視覚的に整理されたコードでボックスを自由に配置できるため、クリエイティブなデザインに最適です。

お知らせ

私たちは、初台、幡ヶ谷、笹塚、代々木エリアでWebサイト制作やLP制作を行っています。これらの地域にお住まいの方や、事業を展開している企業・飲食店様・お店を持たれている方に向けて、Webサイト制作ホームページ制作、さらに企業向けのコーポレートサイト制作を提供しています。お問い合わせなどの目的に合わせたデザイン性の高いLP制作も承っております。

この地域に特化したサービスを提供することで、地域のビジネスがオンラインで成長できるようサポートしています。また、地域のお客様向けに特別なプランもご用意しておりますので、興味のある方はぜひお問い合わせください。

お問い合わせいただければ、詳細なご提案やお得なプランについて、丁寧にご案内いたします。初台、幡ヶ谷、笹塚、代々木エリアの皆様、お気軽にご相談ください。

コメント

コメントする