HTML

<ul class="three_column05">
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
 <li>
  <a href="#">
   <div class="three_column05_img_box"><img src="https://www.bokisan.com/img/code/pic01.webp" alt=""></div>
   <div class="three_column05_txt_box">
   <h2 class="three_column05_main_tit">タイトルが入ります</h2>
   </div>
  </a>
 </li>
</ul>

CSS

.three_column05 {
 display: flex;
 flex-wrap: wrap;
 gap: 30px 30px;
 margin: 0 0 60px;
}
 
.three_column05:last-child {
 margin: 0;
}
.three_column05 > li {
 width: calc((100% - 60px) / 3)
}
 
.three_column05 > li > a {
 text-decoration: none;
 transition: 0.3s all;
}
 
.three_column05 > li > a img {
 transition: 0.3s all;
}
 
.three_column05_txt_box {
 padding: 10px 0;
 background: var(--main-color);
}
 
.three_column05_main_tit {
 font-size: 18px;
 font-size: 1.8rem;
 text-align: center;
 color: #fff;
}
 
@media (max-width : 1060px){
 
.three_column05 > li {
 width: calc((100% - 30px) / 2)
}
 
}
 
 
@media  (max-width : 810px){
 
.three_column05 > li {
 width: 100%;
}
  
.three_column05_img_box {
 text-align: center;
}
  
}
一覧に戻る
テスト
Disconnected
S