CODEWITHSUNDEEP
htmlcsscss-grid
ZeroToss
ZeroToss

Reputation: 11

Image breaks grid layout

I want two responsive columns where the left column will have an image and the right one will have text. I tried doing this with following code, but it breaks when I put the image inside a column.

.about-name {
  text-align: center;
  margin-bottom: 6rem;
}

.card {
  padding: 1rem;
  height: 4rem;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
<div class="cards">
  <div class="card">
    <img src="photo.png" alt="">
  </div>
  <div class="card">
    <p>My Text here</p>
  </div>
</div>

Mainly, I want to build a webpage like the screenshots below:

Screenshot 1

Screenshot 2

Upvotes: 1

Views: 1430

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

You need to set the width and height of the image element, so that it stays inside the grid cell.

.cards {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  height: 4rem;
  padding: 1rem;
  border: 2px dashed green;
}

img {
  max-width: 100%;
  max-height: 100%;
}
<div class="cards">
  <div class="card">
    <img src="http://i.imgur.com/60PVLis.png" alt="">
  </div>
  <div class="card">
    <p>My Text here</p>
  </div>
</div>

jsFiddle demo

Upvotes: 1

Related Questions