Bento UI レイアウトが制作できるジェネレーター

前談： display: grid についてのお話

以前の記事、
カード型レイアウトと相性抜群！gapプロパティを使った簡単レイアウト[css]
では、カード型レイアウトともとても相性が良い、
cssの「gapプロパティ」を使ったレイアウト方法についてご紹介しました。

今回の記事では、その「gapプロパティ」と組み合わせて使う上でも便利な
レイアウト手法である、「cssの display: grid プロパティ」によるレイアウトについて書いていきます。

そして後半では、新しいデザイントレンドとして注目されつつある Bento UI についてもふれていきます。

display: grid を指定するだけで、その要素は「グリッドコンテナー」と言う概念になる

それでは、「cssの display: grid プロパティ」によるレイアウトについて見ていきたいと思います。
前回の記事と同様に、次の様なカード型レイアウトをする場合の話です。

↑このようなカード型レイアウトを作成する場合、
従来通り、もちろん display: flex; を使用しても実現が可能ですが、
display: grid; を使用すると、もっと簡単になります。
具体的には、次の様に書きます。

[cssのgridプロパティによるレイアウトの例（css）]

.my-container {
  display: grid;
  gap: 2rem 2%;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 auto;
  width: 1200px;
}
...(中略)...

↑各カードが並ぶ想定の、親ボックスに指定するcssとして読んでください。
2行目でまず、display: grid; を指定。
これにより、この親ボックスが「グリッドコンテナー」と言う概念になります。
同時に、その子要素（この例で言うと個々のカード）は「グリッドアイテム」と言う概念になります。

続く3行目では、
前回の記事でも登場した gap です。これで、各カード間の余白を指定しています。

そして4行目。
grid-template-columns: 1fr 1fr 1fr;
という指定がありますが、これが「グリッドアイテム」をどう並べるのか、と言うことを定義している部分になります。
今回は、冒頭のキャプチャの様に「3列」で並べたいため、この指定をしています。

もしも各カードを「1列」で並べたい場合の指定は
grid-template-columns: 1fr;
となり、
もしも各カードを「2列」で並べたい場合の指定は
grid-template-columns: 1fr 1fr;
と指定します。

もしも各カードを「4列」で並べたい場合の指定は
grid-template-columns: 1fr 1fr 1fr 1fr;
を指定すれば良いです。（次のキャプチャの様になります。）

また、最初のカードを2枚分、その隣に1枚ずつ並べる場合は
grid-template-columns: 2fr 1fr 1fr;
と指定します。すると、次の様なレイアウトが実現できます。

…いかがでしょうか。
display: flex;
を使った場合のレイアウトに比べて、かなり柔軟に
指定ができると言うことが、お分かりいただけたかと思います。

次のセクションで、htmlを含めたコードの全体像を書いておきます。

コード全体像

「cssの display: grid; プロパティ」を使ったカード型レイアウトの、htmlとcss全体は以下のようになります。

[「cssの display: grid プロパティ」を使ったカード型レイアウト（html側）]

  <div class="my-container">
    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=1" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=2" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=3" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=4" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>
    
    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=5" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=6" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>
  </div>

[「cssの display: grid プロパティ」を使ったカード型レイアウト（css側）]

  .my-container {
    display: grid;
    gap: 2rem 2%;
    grid-template-columns: 2fr 1fr 1fr; /* レイアウトに応じてここを可変 */
    margin: 0 auto;
    width: 1200px;
  }
  .my-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    overflow: hidden;
  }
  .my-figure {
    height: 180px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
  }
  .my-image {
    display: block;
    width: 100%;
  }
  .my-description {
    font-size: .875rem;
    height: 80px;
    padding: 1rem;
  }
  .my-text {
    margin: 0;
  }