Grid card

by raj178

HTML

<div class="wrapper">
<!-- item one -->
  <div class="item">
  <img src="https://images.unsplash.com/photo-1654157925394-4b7809721149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80" alt="">
    <h3>Card one</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime inventore nemo itaque voluptas deleniti enim.</p>
  </div>
  <!-- item two -->
 <div class="item">
  <img src="https://images.unsplash.com/photo-1647934441921-4ed1e182e4b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="">
    <h3>Card two</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime inventore nemo itaque voluptas deleniti enim.</p>
  </div> 
  <!-- item three -->
  <div class="item">
  <img src="https://images.unsplash.com/photo-1453491945771-a1e904948959?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="">
    <h3>Card three</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime inventore nemo itaque voluptas deleniti enim.</p>
  </div>
  <!-- item four -->
  <div class="item">
  <img src="https://images.unsplash.com/photo-1654157925394-4b7809721149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80" alt="">
    <h3>Card one</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime inventore nemo itaque voluptas deleniti enim.</p>
  </div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(318px, 1fr));
  gap: 10px;
}

.item {
  background: lightskyblue;
  color: white;
  border: 2px solid tomato;
}

h3, p {
  text-align: center;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}