CSS grid 속성 이용해서 사진 배치하기

- ul 담고 있는 컴포넌트

  return (
    <div className={classes.video_container}>
      <ul className={classes.video_card_ul}>
        {video &&
          video.map((item, key) => {
            return (
              <Video
                id={item.id}
                key={key}
                title={item.snippet.title}
                thumbnailImg={item.snippet.thumbnails.medium.url}
                channelTitle={item.snippet.channelTitle}
                publishedAt={item.snippet.publishedAt}
              />
            );
          })}
      </ul>
    </div>
  );

- ul 담고 있는 컴포넌트 CSS

.video_card_ul{
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(5, 320px);
    gap: 10px;
}

@media (max-width : 1550px){
    .video_card_ul{
        grid-template-columns: repeat(4, 320px);
    }
}

@media (max-width : 1300px){
    .video_card_ul{
        grid-template-columns: repeat(3, 320px);
    }
}

@media (max-width : 1000px){
    .video_card_ul{
        grid-template-columns: repeat(2, 320px);
    }
}

@media (max-width : 700px){
    .video_card_ul{
        grid-template-columns: repeat(1, 320px);
    }
}

- 각각 이미지 담고 있는 컴포넌트

  return (
    <div className={classes.video_container}>
      <li>
        <div className={classes.video_thumbnail_container}>
          <img
            src={props.thumbnailImg}
            alt="img"
            className={classes.thumbnailImg}
          ></img>
        </div>
        <div className={classes.video_info}>
          <p className={classes.video_info_title}>{props.title}</p>
          <p className={classes.video_info_channelTitle}>
            {props.channelTitle}
          </p>
          <p className={classes.video_info_publishedAt}>
            {format(props.publishedAt, "ko")}
          </p>
        </div>
      </li>
    </div>
  );

- 각각 이미지 담고 있는 컴포넌트 CSS

.video_container li{
    list-style: none;
}


.video_info{
    display: flex;
    flex-direction: column;
    color: #fff;
}

.thumbnailImg{
    cursor: pointer;
}

.video_info p {
    cursor: pointer;
}

.video_info_title{
    font-weight: bold;
    margin: 2px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.video_info_channelTitle{
    margin: 2px 0;
    opacity: 0.8;
}

.video_info_publishedAt{
    margin: 2px 0;
    opacity: 0.6;
}

.video_info_channelTitle:hover{
    opacity: 1;
}