CSS Grid 및 플렉스 박스를 사용한 이미지 위치 지정

질문

현재 내 이미지 갤러리의 모습

<div class="images">
  <img
    src="protest_2.jpg"
    alt="a protest for black lives matter with their faces blurred"
  />
  <img src="protest_1.jpg" alt="a climate strike with their faces blurred" />
</div>

내가 가진 CSS 코드는 다음과 같습니다.

.images img {
    object-fit: cover;
    height: 300px;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .25);
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.images {
    /* CHANGE TO GRID */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    grid-gap: 20px;
    width: 940px;
    max-width: 100%;
    margin: auto;
}
@media (max-width: 1000px) {
    .images {
        grid-template-columns: 1fr;
    }
}

답변1

처음 두 이미지의 grid-row : 를 2 로 설정하고 마지막 이미지에 대해 3 으로 설정합니다. 같은 행의 요소가 정렬됩니다.

답변2

두 열에 걸쳐있는 이미지를 찾고 있으므로 nth-child 를 사용하여 세 번째 이미지를 선택하고 grid-column-end 를 사용합니다.

.images img:nth-child(3) {
  grid-column-end: span 2;
}

또는 nth-child 를 사용하지 않으려면 class를 추가하고 대신 선택할 수 있습니다.

 

 

 

 

출처 : https://stackoverflow.com/questions/62681787/image-positioning-with-css-grid-and-flexbox