Grid column width based on content not working

user_5716477 0
Viewed 97

I have the following layout defined using CSS grid, see the demo below:

.blog-post {
  display: grid;
  grid-template-rows: minmax(auto, max-content) 1fr;
  grid-template-columns: auto minmax(auto, max-content);
  background: #fff;
  border: 5px solid #fff;
  border-radius: 10px;
  height: 100%;
  grid-column: 2/-1;
  width: 100%;
}

.blog-post h1 {
  grid-column: 1/-1;
  padding-bottom: 20px;
}

.blog-post img {
  grid-row: 2;
  grid-column: 2;
  height: 100%;
}

.blog-post p {
  grid-row: 2;
  grid-column: 1;
}
<div id="blog-post-item" class="blog-post">
  <h1>Some amazing blogpost title about something super cool!</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/3-4_ratio_mobile_wallpaper_example.jpg">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
  </p>
</div>

But as you can see in the image below the image falls outside of the grid:

enter image description here

How do I fix this?

If more clarification or information is needed let me know so I can edit the question.

css-grid css image html
2 Answers

I just tried another image link and the style seems to be correct. But try to look in developer tool in your browser maybe the style is overwritten.

and try to give the image tage a max-width: 100%; of the container

.blog-post {
  display: grid;
  grid-template-rows: minmax(auto, max-content) 1fr;
  grid-template-columns: auto minmax(auto, max-content);
  background: #fff;
  border: 5px solid #fff;
  border-radius: 10px;
  height: 100%;
  grid-column: 2/-1;
  width: 100%;
}

.blog-post h1 {
  grid-column: 1/-1;
  padding-bottom: 20px;
}

.blog-post img {
  grid-row: 2;
  grid-column: 2;
  height: 100%;
}

.blog-post p {
  grid-row: 2;
  grid-column: 1;
}
<div id="blog-post-item" class="blog-post">
  <h1>Some amazing blogpost title about something super cool!</h1>
  <img src="https://media.gettyimages.com/photos/stack-of-books-picture-id157482029?s=612x612">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
  </p>
</div>

user_79874630

Images behave bit differently in CSS Grids. They don't occupy the complete grid as mentioned. One of the possible solution can be, Try to wrap that image inside a div & place that div accordingly. This should resolve the issue.

I have updated the html & css accordingly. Check this out Image Placing in Grid for reference.

*,*::before,*::after {
  margin: 0;
  padding: 0;
  bpx-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  background-color: orangered;
}

.blog-post {`enter code here`
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-row-gap: 10px;
  background-color: white;
  margin: 30px;
  padding: 20px;
  border-radius: 10px;
}

.blog-post h1 {
  grid-column: 1 / -1;
}

.blog-post div {
  grid-column: 7 / 9;
  grid-row: 2 / 3;
}

img {
  width: 50%;
}

.blog-post p {
  grid-column: 1 / 6
}
<div id="blog-post-item" class="blog-post">
  <h1>Some amazing blogpost title about something super cool!</h1>
  <div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/544px-CSS3_logo_and_wordmark.svg.png">
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.
  </p>
</div>

user_128147130
Related