Bloggerデザイン : グリッドカード

1. デザインのタイプ

【高さ自動調整・ボタン最下段固定カード】
オーソドックスなタイプのグリッドカードです。

• Fancy Headline

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Vero eos et accusam et justo duo dolores et ea rebum.

• Fancy Headline

  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

• Fancy Headline

  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

• Fancy Headline

  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. .

2. デザインの特徴

• 「ガタガタ」をゼロに
  文章量が異なってもボタンの位置が最下段に来るようにデザインされています。
• レスポンシブ対応
  横幅に応じてグリッド数が変化します。スマートフォンなどでもレスポンシブ対応。

3. 紹介コード

<div class="blog-grid-shop-wrapper">
  <ul class="container">
    <li class="item">
      <h2>タイトル</h2>
      <p class="text">本文</p>
      <button>Shop now</button>
    </li>
    <li class="item">
      <h2>タイトル</h2>
      <p class="text">本文</p>
      <button>Shop now</button>
    </li>
    <li class="item">
      <h2>タイトル</h2>
      <p class="text">本文</p>
      <button>Shop now</button>
    </li>
    <li class="item">
      <h2>タイトル</h2>
      <p class="text">本文</p>
      <button>Shop now</button>
    </li>
  </ul>
</div>

<style>
.blog-grid-shop-wrapper {
  max-width: 100%;
  margin: 40px auto; 
  box-sizing: border-box;
  line-height: 1.5; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.blog-grid-shop-wrapper .container {
  display: grid;
  grid-gap: 30px; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  list-style: none !important;
  margin: 0 auto !important; 
  padding: 0 !important;
  width: 100%;
}

.blog-grid-shop-wrapper .item {
  display: flex;
  flex-direction: column;
  color: #fff;
  background-color: #0d253f;
  padding: 40px 25px !important;
  box-sizing: border-box !important;
  border-radius: 8px; 
  transition: opacity 0.3s ease;
}

.blog-grid-shop-wrapper .item h2 {
  color: #fff !important;
  margin: 0 0 15px 0 !important;
  font-size: 1.6em;
  border: none !important; 
}

.blog-grid-shop-wrapper .item > .text {
  flex: 1 1 auto;
  padding: 10px 0 20px 0;
  margin: 0 !important;
  opacity: 0.9;
}

.blog-grid-shop-wrapper button {
  padding: 12px 0; 
  width: 100%;
  cursor: pointer;
  background-color: #fff;
  color: #0d253f;
  font-weight: bold;
  border: none;
  margin-top: 15px; 
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

.blog-grid-shop-wrapper button:hover {
  opacity: 0.9;
}
</style>