3カラムグリッド記事一覧

<div class="grid06-07-01">
          <div class="c06-07-01"><span class="th06-07-01 th06-07-01-1"></span><p>春の庭づくり入門ガイド</p></div>
          <div class="c06-07-01"><span class="th06-07-01 th06-07-01-2"></span><p>おすすめカフェ巡り特集</p></div>
          <div class="c06-07-01"><span class="th06-07-01 th06-07-01-3"></span><p>在宅ワーク効率化の工夫</p></div>
          <div class="c06-07-01"><span class="th06-07-01 th06-07-01-4"></span><p>写真の構図テクニック集</p></div>
          <div class="c06-07-01"><span class="th06-07-01 th06-07-01-5"></span><p>週末に読みたい本5冊</p></div>
          <div class="c06-07-01"><span class="th06-07-01 th06-07-01-6"></span><p>朝食レシピまとめ</p></div>
        </div>

.d06-07-01{display:block;width:100%;}
        .d06-07-01 .grid06-07-01{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
        .d06-07-01 .c06-07-01{display:flex;flex-direction:column;gap:6px;}
        .d06-07-01 .th06-07-01{display:block;width:100%;height:52px;border-radius:6px;}
        .d06-07-01 .th06-07-01-1{background:linear-gradient(135deg,#a8c0ff,#3f6fd8);}
        .d06-07-01 .th06-07-01-2{background:linear-gradient(135deg,#ffd6a5,#ff8c42);}
        .d06-07-01 .th06-07-01-3{background:linear-gradient(135deg,#b5f2c0,#2fa86a);}
        .d06-07-01 .th06-07-01-4{background:linear-gradient(135deg,#ffb3c6,#e8547a);}
        .d06-07-01 .th06-07-01-5{background:linear-gradient(135deg,#d4c1ff,#7b4fd8);}
        .d06-07-01 .th06-07-01-6{background:linear-gradient(135deg,#ffe28a,#e8a800);}
        .d06-07-01 .c06-07-01 p{margin:0;font-size:11px;line-height:1.4;color:#333;}