Contoh css untuk 3 foto

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  grid-gap: 4px;
}

img {
  max-width: 100%;
}

img:first-child {
  max-width: unset;
  height: 100%;
  width: 100%;
  object-fit: cover;
  grid-row: span 2;
}
<div class="grid">
  <img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
  <img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
  <img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
</div>

About Reza Ervani 430 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.