4列レイアウト

このページの基本カラー

:root {
 --main-color: #133967;
 --sub-color: #C4C4C4;
}

タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE
タイトルが入ります

TITLE

説明・補足

テキストがあるので最終一列
（そもそもテキストが入ってるのに4列だとごちゃごちゃなんですが。。。）

HTML

<ul class="four_column01">
 <li>
  <div class="four_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
  <div class="four_column01_txt_box">
   <div class="four_column01_tit_area">
     <h2 class="four_column01_tit">タイトルが入ります</h2>
     <p class="four_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="four_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic02.webp" alt="">
  </div>
  <div class="four_column01_txt_box">
   <div class="four_column01_tit_area">
     <h2 class="four_column01_tit">タイトルが入ります</h2>
     <p class="four_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="four_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic03.webp" alt="">
  </div>
  <div class="four_column01_txt_box">
   <div class="four_column01_tit_area">
     <h2 class="four_column01_tit">タイトルが入ります</h2>
     <p class="four_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="four_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic04.webp" alt="">
  </div>
  <div class="four_column01_txt_box">
   <div class="four_column01_tit_area">
     <h2 class="four_column01_tit">タイトルが入ります</h2>
     <p class="four_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="four_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic05.webp" alt="">
  </div>
  <div class="four_column01_txt_box">
   <div class="four_column01_tit_area">
     <h2 class="four_column01_tit">タイトルが入ります</h2>
     <p class="four_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
 <li>
  <div class="four_column01_img_box">
   <img src="https://www.bokisan.com/img/code/pic06.webp" alt="">
  </div>
  <div class="four_column01_txt_box">
   <div class="four_column01_tit_area">
     <h2 class="four_column01_tit">タイトルが入ります</h2>
     <p class="four_column01_sub_tit"><span>TITLE</span></p>
   </div>
  </div>
 </li>
</ul>

CSS

.four_column01 {
 display: flex;
 flex-wrap: wrap;
 gap: 20px 20px;
 margin: 0 0 40px;
}
 
 
.four_column01:last-child {
 margin-bottom: 0;
}
 
.four_column01 > li {
    width: calc((100% - 60px ) / 4);
}
 
.four_column01_txt_box {
 margin: 15px 0 0;
}
 
.four_column01_tit_area {
 display: flex;
 flex-direction: column-reverse;
 line-height: 1.3;
}
 
.four_column01_tit {
 font-size: 18px;
 font-weight: bold;
}
 
.four_column01_tit+.four_column01_sub_tit {
 font-size: 16px;
 font-weight: bold;
 color: var(--main-color);
}
 
.four_column01_img_box {
 text-align: center;
}
 
@media  (max-width : 1060px){
 
 
.four_column01 > li {
    width: calc((100% - 40px ) / 3);
}
 
.four_column01_tit {
 font-size: 16px;
 font-size: 1.6rem;
} 
  
.four_column01_tit+.four_column01_sub_tit {
 font-size: 14px;
 font-size: 1.4rem;
} 
  
}
 
@media (max-width : 810px){
 
.four_column01 > li{
    width: calc((100% - 20px ) / 2);
 }
  
}
 
@media (max-width : 640px){
 
.four_column01 > li {
 width: 100%;
 max-width: inherit;
 margin: 0;
}
 
}

詳細

説明・補足

最終2列

HTML

<ul class="four_column02">
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic01.webp" alt="">
  </div>
 </li>
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic02.webp" alt="">
  </div>
 </li>
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic03.webp" alt="">
  </div>
 </li>
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic04.webp" alt="">
  </div>
 </li>
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic05.webp" alt="">
  </div>
 </li>
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic06.webp" alt="">
  </div>
 </li>
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic07.webp" alt="">
  </div>
 </li>
 <li>
  <div class="four_column02_img_box">
   <img src="https://www.bokisan.com/img/code/pic08.webp" alt="">
  </div>
 </li>
</ul>

CSS

.four_column02 {
 display: flex;
 flex-wrap: wrap;
 gap: 20px 20px;
 margin: 0 0 40px;
}
 
 
.four_column02:last-child {
 margin-bottom: 0;
}
 
.four_column02 > * {
    width: calc((100% - 60px ) / 4);
}
 
.four_column02_img_box {
 text-align: center;
}
 
@media  (max-width : 1060px){
 
.four_column02 > * {
    width: calc((100% - 40px ) / 3);
}
 
}
 
@media (max-width : 810px){
 
.four_column02 > * {
    width: calc((100% - 20px ) / 2);
 }
  
}

詳細