With css grid, how to make child p tag the same with as auto width made child in the same grid?

Question

I have a .post div which is the display:grid, and I made all the columns and rows auto to adjust to the size of whatever my img is going to be. The img has a max-width of 19em and I don't want the .post div to exceed whatever the image width ends up being with that max-width, but when my p tag is too long, the width of my div extends with it, beyond the img width. I want the p tag to go on the next line below it when it goes beyond the width of my img, but I'm not sure how to do this.

.post {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  border: solid 2px gray;
  margin: 5px 10px;
  grid-template-areas:
  'top top top'
  'name name name'
  'comment comment .';
}

.post > img {
  max-height: 19em;
  max-width: 19em;
  grid-area: top;
}

.post > h3 {
  grid-area: name;
  padding-left: 5px;
  padding-top: 5px;
  color: #0f0;
}

.post > p {
  grid-area: comment;
  padding: 4px 4px 6px 6px;
  white-space: initial;
}

<div class="post">
  <img src="https://placehold.it/600x400" alt="">
  <h3>Heading</h3>
  <p>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>
</div>

EDIT: I do not want to fix this by making height auto on my images, since some of my images are too large I want to restrict their height to 19em. How can I solve this without removing the height restriction on my image?

I already tried this, it doesn't work. One of my divs keeps expanding beyond the image width when I do that and the text also overflows from the div so it breaks everything. @bhargav_Chudasama — icewizard, Sep 07 '18 at 11:47
@Paulie_D just edited it with a picture of my problem. Should I add a codepen too? — icewizard, Sep 07 '18 at 12:03
Related if not duplicate - https://stackoverflow.com/questions/30761969/center-image-and-text-at-large-width-allow-both-to-shrink-at-small-width — Paulie_D, Sep 07 '18 at 12:17
Pretty sure *this is not possible* with CSS-Grid. The columns are always going to expand to their max-width depending on which row is widest. — Paulie_D, Sep 07 '18 at 12:25

score 1 · Accepted Answer · answered Sep 07 '18 at 13:41

I solved this by making a container div and using max-height and min-height in my img. Here is what I changed -

   <div class='post'>
        <div class='post2'>
           <img src='uploadedFiles/<?php echo $image->image; ?>' alt='$image->id'>
           <h3><?php echo $image->user; ?></h3>
           <p>"<?php echo $image->description; ?>"</p>
        </div>
    </div> 


.post {

    display: inline-grid;

    border: solid 2px gray;

    margin: 5px 10px;

    max-width : 19em;

    text-align: center;

}

.post2 {

    max-width: 19em;

    display:inline-block;
}

.post2 > img {

    max-height: 19em;

    min-width:100%;

    max-width: 100%;

    cursor: pointer; 

}

.post2 > h3 {

    padding-left : 5px;

    padding-top : 5px;

    font-weight: bold;

    color: #00ff00;

}

.post2 > p {


    padding: 4px 4px 6px 6px;

    white-space: initial;

    word-wrap: break-word;

}

score 0 · Answer 2 · answered Sep 07 '18 at 13:31

0

Simply set the max-width:19em; width for entire div.

.post {
    max-width: 19em;
}

I hope this helps you.

answered Sep 07 '18 at 13:31

Kalyan

187
2
14

I tried that but then I had the problem of the div not fixing to the image width, but I solved it with a different method. Thanks for the input. – icewizard Sep 07 '18 at 13:40
1

Gäñèsh Kàlyâñ Kömmîsëttï is right, all you had to do was to add `max-width` to `19em` to .post class check this live example https://codepen.io/anon/pen/ZMaMea?editors=1100 – Mario Sep 08 '18 at 02:38

With css grid, how to make child p tag the same with as auto width made child in the same grid?

2 Answers2