【サンプルコードあり】グリッドレイアウトでサイズがバラバラの画像の配置をでやってみた。レスポンシブ対応まで挑戦。

グリッドレイアウトを使うと、レイアウトが簡単に作れるようになる。

今まで使ってたFlexboxでは、ちょっと再現しにくい
レイアウトもグリッドレイアウトを使うと、いろんなパターンが
簡単に作れる印象です。

このグリッドレイアウト、色々調べた結果、不揃いの場合の
配置はちょっと大変なのかな？
とゆう印象です。

コードのサンプル情報ないかと探したのですが、現状では
見つけれなかったので、今回自分でやってみて出来たので記事にしました。

バラバラのサイズの画像の配置方法を探してる場合は
参考にしてみてください。

ちょっとややこしい感じなので、
他にもいい方法があれば教えていただきたいです。

今回、下図のような画像レイアウトをグリッドレイアウトで
チャレンジてみました。

簡単に出来るかと思いましたが、結構大変でした。

規則性のあるサイズの配置の場合は無っちゃ簡単で楽に
出来るようになるなという印象です。

実際に作成したコード
実は、この方法では問題点がありました。
参考でサイズをｐｘ指定したバージョン
レスポンシブ対応もやってみた。
1. 画像の配置変更例
レスポンシブ対応したコード
YouTubeはこちら。

実際に作成したコード

今回のこのパターンで困ったのが、各画像のサイズが
バラバラでそのサイズも出来るだけ再現できるように
作成したので、その部分で苦労しました。

実際に作成したのがこんな感じで出来ました。画像入れる前の段階です。

書いたコードはこちらです。検証4のコード

HTML

<body>
  <div class="b-wrap">
    <div class="b-container">
      <div class="b-item1">item1</div>
      <div class="b-item2">item2</div>
      <div class="b-item3">item3</div>
      <div class="b-item4">item4</div>
      <div class="b-item5">item5</div>
      <div class="b-item6">item6</div>
      <div class="b-item7">item7</div>
    </div>
  </div>
</body>

<body>

</div>

</body>

CSS

@charset "utf-8";

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.b-wrap {
  position: relative;
  width: 100%;
  max-width: 1310px;
  margin: auto;
}

.b-container {
  display: grid;
  padding: 10px;
  height: 434px;
  margin: 100px auto;
  /* background: #f8cab4; */
  grid-template:
  "b-item1 ....... b-item2 ....... b-item3 ....... b-item4"
  "b-item1 ....... b-item5 ....... b-item6 ....... b-item7"
  /23.1% 12px 22.4% 12px 1fr 12px 13.5%;
}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {
  /* border: 1px solid red; */
  font-size: 20px;
}

.b-item1 {
  grid-area: b-item1;
  background: aqua;
}

.b-item2 {
  grid-area: b-item2;
  background: pink;
  height: 247px;
}

.b-item3 {
  grid-area: b-item3;
  background: blanchedalmond;
  height: 166px;
}

.b-item4 {
  grid-area: b-item4;
  background: orange;
  height: 165px;
}

.b-item5 {
  grid-area: b-item5;
  background: blueviolet;
  height: 150px;
  margin-top: 16px;
}

.b-item6 {
  grid-area: b-item6;
  background: aliceblue;
  width: 68.5%;
  height: 234px;
  margin-top: -67px;
}

.b-item7 {
  position: absolute;
  grid-area: b-item7;
  background: aquamarine;
  height: 234px;
  width: 24%;
  bottom: 10px;
  right: 10px;
}

@charset "utf-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

.b-wrap {

position: relative;

width: 100%;

max-width: 1310px;

margin: auto;

}

.b-container {

display: grid;

padding: 10px;

height: 434px;

margin: 100px auto;

/* background: #f8cab4; */

grid-template:

"b-item1 ....... b-item2 ....... b-item3 ....... b-item4"

"b-item1 ....... b-item5 ....... b-item6 ....... b-item7"

/23.1% 12px 22.4% 12px 1fr 12px 13.5%;

}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {

/* border: 1px solid red; */

font-size: 20px;

}

.b-item1 {

grid-area: b-item1;

background: aqua;

}

.b-item2 {

grid-area: b-item2;

background: pink;

height: 247px;

}

.b-item3 {

grid-area: b-item3;

background: blanchedalmond;

height: 166px;

}

.b-item4 {

grid-area: b-item4;

background: orange;

height: 165px;

}

.b-item5 {

grid-area: b-item5;

background: blueviolet;

height: 150px;

margin-top: 16px;

}

.b-item6 {

grid-area: b-item6;

background: aliceblue;

width: 68.5%;

height: 234px;

margin-top: -67px;

}

.b-item7 {

position: absolute;

grid-area: b-item7;

background: aquamarine;

height: 234px;

width: 24%;

bottom: 10px;

right: 10px;

}

今回この配置を作るに、まずgrid-template:
を使って、表現したい画像の配置を指定します。

１列目の画像の横幅をそれぞれ指定していきました。

今回は画面サイズによって横幅も変わっていくように
％表示で記載してます。
ここは、ｐｘ指定でも　1ｆｒ（自動調整）でもOＫです。

ｐｘで指定すると簡単だが、画面が小さくなった時
画像が切れるので、今回は％使ってます。

％の基準は.b-imag-wrapのwidth が基準。

ここで、指定してる　b-item1・b-item2・ b-item3
をclassで表示したい場所を指定していきます。

.b-item1 {
grid-area: b-item1;
}

これの場合だと class .b-item1の要素は
grid-template　で指定した b-item1の場所に配置されます。

grid-templateで全体の配置図を作って、
grid-area　で要素の配置する場所を指定する感じです。

はめ込む感じで出来るので、慣れてくると簡単。

まだサイズの指定が出来てない２行目のサイズを指定

これで、全ての画像が配置されてると思います。
今の段階では、grid-template　で指定した横幅で区切られてます。

２行目の画像の横幅も変更したいので指定していきます。
今回は、色々探したけどやり方の情報なかった。

class にwidth/height指定したら、反映されたので今回はそれを
使ってやっていきました。

こんな感じです。

この２行目も　％でサイズを決めてますが、この２列目の場合は
サイズの基準は、１行目の横幅が基準になってます。

サイズの設定が出来たら、配置がおかしいのがあります。
これは、１行目で指定してる横幅で仕切りが出来てるためです。

  .b-item5 {
    grid-area: b-item5;
    height: 152px;
    margin-top: 14px;
    background:blueviolet;
  }

  .b-item6 {
    grid-area: b-item6;
    height: 236px;
    width: 68.5%;
    margin-top: -70px;
    background:aliceblue;
  }

.b-item7 {
    grid-area: b-item7;
    height: 236px;
    width: 187%;
    margin-top: -72px;
    margin-left: -151px;
    background:aquamarine;
  }

.b-item5 {

grid-area: b-item5;

height: 152px;

margin-top: 14px;

background:blueviolet;

}

.b-item6 {

grid-area: b-item6;

height: 236px;

width: 68.5%;

margin-top: -70px;

background:aliceblue;

}

.b-item7 {

grid-area: b-item7;

height: 236px;

width: 187%;

margin-top: -72px;

margin-left: -151px;

background:aquamarine;

}

図配置おかしい７番目の画像の配置が

なので今回はマージンのマイナス指定を
使って配置を整えました。

実は、この方法では問題点がありました。

上記のネガティブマージンでの配置は、画面が小さくなると
下図みたいに画像の位置が微妙にずれました。

いろいろやってみたが解消されず、position: ;を使って配置
したら解消されました。

.b-imag-wrapにposition: relative;

position: absolute;
bottom: 0;
right: 0;
width: 25.5%;
で設定したら下図のようになって、ズレ解消されました。

これで無事作成できました。

このグリッドレイアウト、IEが廃止になって、これから使われて
行く機会が増えると思います。

実際に今回調べて思ったのが、規則性のある要素の配置は
ほんとに簡単で綺麗に作っるので、覚えると便利な印象です。

このグリッドレイアウト使うとサイトの構成も簡単に出来るので
これから使っていく機会は多くなっていくと思います。

参考でサイズをｐｘ指定したバージョン

最初に作成した、横幅をｐｘで固定したバージョン
こっちは、grid-template　じゃなく、
grid-template-columnsとgrid-template-rowsを
使って作成してます。

実際に書いたコード

ＨＴＭＬ

  <body>
    <div class="imag-wrap">
      <div class="h-container">
        <div class="item1 imgbox">item1</div>
        <div class="item2 imgbox">item2</div>
        <div class="item3 imgbox">item3</div>
        <div class="item4 imgbox">item4</div>
        <div class="item5 imgbox">item5</div>
        <div class="item6 imgbox">item6</div>
        <div class="item7 imgbox">item7</div>
        <!-- <div class="item6">item8</div> -->
      </div>
    </div><!-- /.imag-wrap -->
  </body>

<body>

</div>

</div>

</body>

ＣＳＳ

.imag-wrap {
  width: 100%;
  margin: auto;
}
.h-container{
  display: grid;
  max-width: 1290px;
  height: 414px;
  margin-bottom: 200px;

  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 207px 207px;
  background: rgb(235, 212, 212);
column-gap: 14px;

}

.item1,.item2,.item3,.item4,.item5,.item6,.item7 {
  border: 1px rgb(210, 38, 38) solid;
}

.item1{
  grid-row: 1/3;
  width: 298px;
  }

  .item2 {
    height: 247px;
    width: 289px;
  }

  .item3 {
    height: 166px;
    width: 487px;
  }

  .item4 {
    height: 165px;
    width: 170px;
  }

  .item5 {
    height: 152px;
    width: 291px;
    margin-top: 55px;
  }

  .item6 {
    height: 236px;
    width: 320px;
    margin-top: -29px;
  }

  .item7 {
    height: 236px;
    width: 328px;
    margin-top: -30px;
    margin-left: -157px;
  }

.imag-wrap {

width: 100%;

margin: auto;

}

.h-container{

display: grid;

max-width: 1290px;

height: 414px;

margin-bottom: 200px;

grid-template-columns: 1fr 1fr 1fr 1fr;

grid-template-rows: 207px 207px;

background: rgb(235, 212, 212);

column-gap: 14px;

}

.item1,.item2,.item3,.item4,.item5,.item6,.item7 {

border: 1px rgb(210, 38, 38) solid;

}

.item1{

grid-row: 1/3;

width: 298px;

}

.item2 {

height: 247px;

width: 289px;

}

.item3 {

height: 166px;

width: 487px;

}

.item4 {

height: 165px;

width: 170px;

}

.item5 {

height: 152px;

width: 291px;

margin-top: 55px;

}

.item6 {

height: 236px;

width: 320px;

margin-top: -29px;

}

.item7 {

height: 236px;

width: 328px;

margin-top: -30px;

margin-left: -157px;

}

この方法だと横幅可変しません。参考にしてみてください。

レスポンシブ対応もやってみた。

上記の一番上のコードだと、自動で折り返されないので
横幅が900px以下で表示変える設定やってみました。

今回画像のサイズが、バラバラな状態なので、自動で
折り返すのじやなく、横幅が900px以下では、直線的な
配置に変更しました。

一番上の、横幅可変タイプのでやってます。

900px以下での、画像の並びをgrid-template:指定。

CSS

@media screen and (max-width: 900px) {
  .b-container {
    height: auto;
    grid-template:
    "b-item1 b-item2" 250px
    "b-item1 b-item5" 200px
    "b-item3 b-item4" 200px
    "b-item6 b-item7" 300px
    / 1fr 1fr;
    gap: 12px;
  }

  .b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {
    height: auto;
  }

  .b-item7 {
    position: static;
    width: auto;
  }

  .b-item6 {
    width: 100%;
    margin-top: 0;
  }

}

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

.b-container {

height: auto;

grid-template:

"b-item1 b-item2" 250px

"b-item1 b-item5" 200px

"b-item3 b-item4" 200px

"b-item6 b-item7" 300px

/ 1fr 1fr;

gap: 12px;

}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {

height: auto;

}

.b-item7 {

position: static;

width: auto;

}

.b-item6 {

width: 100%;

margin-top: 0;

}

grid-template:
“b-item1 b-item2” 250px
“b-item1 b-item5” 200px
“b-item3 b-item4” 200px
“b-item6 b-item7” 300px
/ 1fr 1fr;

で画像の配置指定。

b-item1の場所を変更することで、並べ替え可能。

横の250ｐｘで各行の高さを指定。
記入しない場合はauto.

1frで横幅の指定。この場合は画像２の幅が均等に
２枚並ぶ指定。
pxや％での指定も可能。

さっきの配置で、.b-item7はposition:で配置してたので
position: static;で解除します。
幅はいっぱいに広がるように設定

これで、900ｐｘ以下では、縦に並ぶ設定が完了です。

まだ複雑な配置は難しい。もっといろいろ勉強していきます。

画像の配置変更例

一番下にb-item3の画像を入れ替えて横いっぱいに表示。

この表示にすると画像が１枚余るので、b-item2の画像を
display: none;で非表示にするとできました。

CSS

@media screen and (max-width: 900px) {
.b-container {
height: auto;
grid-template:
"b-item1 b-item6" 250px
"b-item1 b-item5" 200px
"b-item7 b-item4" 200px
"b-item3 b-item3" 300px
/ 1fr 1fr;
gap: 12px;
}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {
height: auto;
}

.b-item7 {
position: static;
width: auto;
}

.b-item6 {
width: 100%;
margin-top: 0;
}

.b-item2 {
display: none;
}

}

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

.b-container {

height: auto;

grid-template:

"b-item1 b-item6" 250px

"b-item1 b-item5" 200px

"b-item7 b-item4" 200px

"b-item3 b-item3" 300px

/ 1fr 1fr;

gap: 12px;

}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {

height: auto;

}

.b-item7 {

position: static;

width: auto;

}

.b-item6 {

width: 100%;

margin-top: 0;

}

.b-item2 {

display: none;

}

レスポンシブ対応したコード

最後に今回作成の、画像挿入までのコードも書いておきます。
画像URの所に、ご自分の環境でのURLに変更すると表示可能。

HTML

<body>
  <div class="b-wrap">
    <div class="b-container">
      <div class="b-item1 imagbox"><img src="ここに画像URL挿入" alt=""></div>
      <div class="b-item2 imagbox"><img src="ここに画像URL挿入" alt=""></div>
      <div class="b-item3 imagbox"><img src="ここに画像URL挿入" alt=""></div>
      <div class="b-item4 imagbox"><img src="ここに画像URL挿入" alt=""></div>
      <div class="b-item5 imagbox"><img src="ここに画像URL挿入" alt=""></div>
      <div class="b-item6 imagbox"><img src="ここに画像URL挿入" alt=""></div>
      <div class="b-item7 imagbox"><img src="ここに画像URL挿入" alt=""></div>
    </div>
  </div>
</body>

<body>

</div>

</body>

CSS

@charset "utf-8";

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.b-wrap {
  position: relative;
  width: 100%;
  max-width: 1310px;
  margin: auto;
}

.b-container {
  display: grid;
  padding: 10px;
  height: 434px;
  margin: 100px auto;
  /* background: #f8cab4; */
  grid-template:
  "b-item1 ....... b-item2 ....... b-item3 ....... b-item4"
  "b-item1 ....... b-item5 ....... b-item6 ....... b-item7"
  /23.1% 12px 22.4% 12px 1fr 12px 13.5%;
}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {
  /* border: 1px solid red; */
  font-size: 20px;
}

.b-item1 {
  grid-area: b-item1;
  background: aqua;
}

.b-item2 {
  grid-area: b-item2;
  background: pink;
  height: 247px;
}

.b-item3 {
  grid-area: b-item3;
  background: blanchedalmond;
  height: 166px;
}

.b-item4 {
  grid-area: b-item4;
  background: orange;
  height: 165px;
}

.b-item5 {
  grid-area: b-item5;
  background: blueviolet;
  height: 150px;
  margin-top: 16px;
}

.b-item6 {
  grid-area: b-item6;
  background: aliceblue;
  width: 68.5%;
  height: 234px;
  margin-top: -67px;
}

.b-item7 {
  position: absolute;
  grid-area: b-item7;
  background: aquamarine;
  height: 234px;
  width: 24%;
  bottom: 10px;
  right: 10px;
}

.imagbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

@media screen and (max-width: 900px) {
  .b-container {
    height: auto;
    grid-template:
    "b-item1 b-item2" 250px
    "b-item1 b-item5" 200px
    "b-item3 b-item4" 200px
    "b-item6 b-item7" 300px
    / 1fr 1fr;
    gap: 12px;
  }

  .b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {
    height: auto;
  }

  .b-item7 {
    position: static;
    width: auto;
  }

  .b-item6 {
    width: 100%;
    margin-top: 0;
  }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

@charset "utf-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

.b-wrap {

position: relative;

width: 100%;

max-width: 1310px;

margin: auto;

}

.b-container {

display: grid;

padding: 10px;

height: 434px;

margin: 100px auto;

/* background: #f8cab4; */

grid-template:

"b-item1 ....... b-item2 ....... b-item3 ....... b-item4"

"b-item1 ....... b-item5 ....... b-item6 ....... b-item7"

/23.1% 12px 22.4% 12px 1fr 12px 13.5%;

}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {

/* border: 1px solid red; */

font-size: 20px;

}

.b-item1 {

grid-area: b-item1;

background: aqua;

}

.b-item2 {

grid-area: b-item2;

background: pink;

height: 247px;

}

.b-item3 {

grid-area: b-item3;

background: blanchedalmond;

height: 166px;

}

.b-item4 {

grid-area: b-item4;

background: orange;

height: 165px;

}

.b-item5 {

grid-area: b-item5;

background: blueviolet;

height: 150px;

margin-top: 16px;

}

.b-item6 {

grid-area: b-item6;

background: aliceblue;

width: 68.5%;

height: 234px;

margin-top: -67px;

}

.b-item7 {

position: absolute;

grid-area: b-item7;

background: aquamarine;

height: 234px;

width: 24%;

bottom: 10px;

right: 10px;

}

.imagbox img {

width: 100%;

height: 100%;

object-fit: cover;

vertical-align: bottom;

}

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

.b-container {

height: auto;

grid-template:

"b-item1 b-item2" 250px

"b-item1 b-item5" 200px

"b-item3 b-item4" 200px

"b-item6 b-item7" 300px

/ 1fr 1fr;

gap: 12px;

}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {

height: auto;

}

.b-item7 {

position: static;

width: auto;

}

.b-item6 {

width: 100%;

margin-top: 0;

}

こんな感じで、今回グリッドレイアウトの基本を学んでみました。
今回この方法を調べてると、もっと複雑な配置のサイトもたくさん見かけました。

また、このグリッドレイアウトを使うとサイトのレイアウトも簡単に出来るの
みたいなので、時機を見て使っていきたいと思います。

まだまだ、色々勉強していくともっと表現幅が広がっていき
それが簡単に出来るような印象でした。

サイズの均等配置が出来る場合はもっと簡単に綺麗に出来る感じ。

今回は勉強の意味で、バラバラサイズの場合を自分なりに作ってみました。

今回、自分でいろいろいじりながらやったものなので、おかしな点・
間違った指定方法やもっと効率のいいやり方など、出来ればアドバイス
いただけると嬉しいです。

YouTubeはこちら。

HTML/CSSで作るカード型レイアウトの一例で、カーソルホバーしたらタイトルテキストが現れる設定。【サンプルコードあり】

HTML/CSSで作るカード型レイアウトの一例を参考までに記事にしました。今回は、縦型のカードでカードをホバーすると詳細のテキストとリンクボタンが表示される設定です。実際に作成したカードデザインカードの周りには、box-shado...

flexbox （フレックスボックス）3カラム 5つの要素の時、２行目の配置を右側開けて左に寄せる方法。疑似要素で簡単に出来る。【サンプルコードあり】

flexboxで、3カラムで要素を５つ２段でならべた場合下２段目の要素が２つの時の配置がうまくいかない。横に３カラムの２行で５つの要素を並べた時に、均等配置でしたいので、 justify-content: space-between;...