<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;
}
}