<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  <!-- GoogleFont -->
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;500;700;900&display=swap" rel="stylesheet">
  <!-- FontAwesome -->
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
  <div class="cont_no_009">
    <section class="conts">
      <div class="cont">
        <h2 class="cont_title">CON<i>TENT</i><span>CONT_NO_009</span></h2>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <a class="cont_btn" href="">一覧を見る</a>
      </div>
      <div class="gallery_in">
        <div class="image"><img src="https://cdn.pixabay.com/photo/2017/09/09/18/25/living-room-2732939_960_720.jpg"></div>
        <div class="image"><img src="https://cdn.pixabay.com/photo/2017/03/28/12/13/chairs-2181968_960_720.jpg"></div>
        <div class="image"><img src="https://cdn.pixabay.com/photo/2017/03/22/17/39/kitchen-2165756_960_720.jpg"></div>
        <div class="image"><img src="https://cdn.pixabay.com/photo/2015/05/29/19/17/study-789631_960_720.jpg"></div>
        <div class="image"><img src="https://cdn.pixabay.com/photo/2019/05/28/00/15/indoors-4234071_960_720.jpg"></div>
        <div class="image"><img src="https://cdn.pixabay.com/photo/2014/07/31/21/41/apartment-406901_960_720.jpg"></div>
        <div class="image"><img src="https://cdn.pixabay.com/photo/2015/03/11/21/50/shutters-669296_960_720.jpg"></div>
        <div class="image"><img src="https://cdn.pixabay.com/photo/2016/11/30/08/47/the-sanctum-sanctorum-1872194_960_720.jpg"></div>
      </div>
    </section>
  </div>
</body>
/* ----------------------------------------------------------------------
cont_no_009
---------------------------------------------------------------------- */
.cont_no_009{
  padding:80px 40px;
  @media (max-width:600px) {
    padding: 0 20px;
  }
  @media (max-width:500px) {
    padding: 0 10px;
  }
  .conts{
    margin:0 auto;
    max-width: 1000px;
    width: 100%;
    display: grid;
    grid-template-columns: 300px calc(100% - 300px);
    @media (max-width:990px) {  
      grid-template-columns: 1fr;
    }
    .cont{
      padding-right: 30px;
      display: flex;
      align-content: space-between;
      flex-wrap: wrap;
      @media (max-width:990px) {  
        padding:0;
      }
      .cont_title{
        font-size: 35px;
        font-weight: bold;
        @media (max-width:990px) {  
          margin-bottom: 1em;
        }
        span{
          margin-top:.5em;
          display: block;
          font-size: 13px;
          font-weight: initial;
          color:#0AA8C9;
        }
        i{
          color: #0AA8C9;
        }
      }
      p{
        line-height: 1.8em;
        @media (max-width:990px) {  
          margin-bottom: 2em;
        }
      }
      .cont_btn{
        padding:.9em;
        width: 180px;
        border:2px solid #333;
        color: #333;
        text-align: center;
        font-size: 15px;
        @media (max-width:990px) {  
          margin-bottom:2em;
        }
      }
    }
    .gallery_in{
      display: grid;
      grid-template-columns: repeat(4 , 1fr);
      gap: 10px;
      @media (max-width:780px) {  
        grid-template-columns: repeat(3 , 1fr);
      }
      @media (max-width:550px) {  
        grid-template-columns: repeat(2 , 1fr);
      }
      .image{
        position: relative;
        width: 100%;
        height: auto;
        &::before{
          padding-top: 100%;
          content:"";
          display: block;
        }
        &:nth-of-type(4){
          @media (max-width:780px) {  
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 3;
            &::before{
              padding-top: 50%;
            }
          }
          @media (max-width:550px) {  
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 3;
            &::before{
              padding-top: 100%;
            }
          }
        }
        img{
          position: absolute;
          top:0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
View Compiled

External CSS

  1. https://codepen.io/jlloasth/pen/8ebc092270f89733474c40e5133f3a01

External JavaScript

This Pen doesn't use any external JavaScript resources.