説明・補足

最終2列

HTML

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);
 }
 
}
一覧に戻る