Html Question posted in
Some basic documentation can be found here.

Html – How do I fix CSS grid rows to not take the auto height?

I’m trying to get this result:

enter image description here

But the code I have is doing this:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.image {
    grid-row-start: 1;
    grid-row-end: 4;
}

h1 {
    grid-column-start: 2;
    grid-column-end: 2;
}

.desc {
    grid-column-start: 2;
    grid-column-end: 3;
}
<div class="container">
<img src="https://placehold.co/400x400">
<h1>Title</h1>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text here</p>
</div>

And I have no idea how to fix this and what this behavior is. I googled and read, but it’s not making sense. Can someone just take a look and let me know why my logic is failing me?

Tags:

2

Answers


  1. 0

    It was a simple fix, just to add the image class at the img tag and add some gap between.

    .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap:20px;
}

.image {
    grid-row-start: 1;
    grid-row-end: 4;
}

h1 {
    grid-column-start: 2;
    grid-column-end: 2;
}

.desc {
    grid-column-start: 2;
    grid-column-end: 3;
}
    <div class="container">
<img class="image" src="https://placehold.co/400x400">
<h1>Title</h1>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text here</p>
</div>
    Login or Signup to reply.
  2. 0

    You need to wrap them into each container and you also need to divide the parent container into 2

    .container{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap:30px; 
}
.left img{
  width:100%;
}
    <div class="container">
  <div class="left">
    <img src="https://placehold.co/400x400">
  </div>
  <div class="right">
      <h1>Title</h1>
  <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</     p>
    <p>Some text here</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search