Kevin Powell - Community•3mo ago

grid-row-columns: image overflowing out of grid item in grid layout.

Hello everyone. I am trying to create a grid layout that shows 3 columns vertically and than 3 columns horizontally using grid-template-rows. I don't want to achieve this using the auto-fit or auto-fill attributes with grid-template-column. I want to be able to define the height of my rows within the grid layout. The issue is that my image keeps flowing out the bottom. I can't understand why this is happening or a solution. Any ideas? I am coding in react. Code sandbox: https://codesandbox.io/p/sandbox/xy3l2p

12 Replies

DUDEYRUDEYOP•3mo ago

<div className="projects-list">
                    <div className="card">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                        
                    </div>
                    <div className="card"> 
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    <div className="card navigation--assistant">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    
                </div>
            </div>

<div className="projects-list">
                    <div className="card">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                        
                    </div>
                    <div className="card"> 
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    <div className="card navigation--assistant">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    
                </div>
            </div>

Here is my css:

.project{
    padding: 2rem 1.5rem; 
    background: blue;
    /* background-image:url("../../assets/legoBlocks.jpeg"); */
    color: black; 
  }

  .card__img{
    max-width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
    
  }

  /* layout */

  .projects-list{
    display: grid; 
    grid-template-rows: repeat(3, minmax(0, 300px));
    
    grid-gap: 2rem 0; 
  }


  .card{
    padding: 1.5rem; 
    background: red; 
    color: black; 
    
    height: 100%; 
  }

.project{
    padding: 2rem 1.5rem; 
    background: blue;
    /* background-image:url("../../assets/legoBlocks.jpeg"); */
    color: black; 
  }

  .card__img{
    max-width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
    
  }

  /* layout */

  .projects-list{
    display: grid; 
    grid-template-rows: repeat(3, minmax(0, 300px));
    
    grid-gap: 2rem 0; 
  }


  .card{
    padding: 1.5rem; 
    background: red; 
    color: black; 
    
    height: 100%; 
  }

somrigostsås 🧀•3mo ago

Could you post this to a code review app, like CodeSandbox, as mentioned here (https://discord.com/channels/436251713830125568/1022288836715356180/1022288836715356180)?

DUDEYRUDEYOP•3mo ago

Yes here it is. I have put the issue into a code sandbox: https://codesandbox.io/p/sandbox/xy3l2p

ἔρως•3mo ago

grid-template-rows: repeat(3, minmax(0, 300px)); <-- try replacing this with absolutely nothing at all? in fact, why are you even using grid-template-rows?

DUDEYRUDEYOP•3mo ago

I don't know. I want to have 3 cards stacked vertically on smaller screens and than 3 cards stacked horizontally on larger screens , on my website design. I wanted to use grid to achieve the horizontal design on larger screens. Do you think I should not use grid for small screen, and than use grid for large screen?

ἔρως•3mo ago

you can use grid, but just set the columns for desktop without touching the rows

DUDEYRUDEYOP•3mo ago

Yeah. I have done this and everything is working. I’m still interested why in this case the image flowed out the bottom. Do you have any idea why?

ἔρως•3mo ago

yes: you limited the height but kept the default overflow: auto so, it just overflowed

DUDEYRUDEYOP•3mo ago

I would have liked in this situation, to have the image size proportionally and nicely by itself. If I hide the overflow it goes over the padding I have in my card and it still does not resize properly. How would I prevent my image from overflowing over the padding and allow my image to resize properly.

DUDEYRUDEYOP•3mo ago

ἔρως•3mo ago

in this case, i would just set the maximum height for the image

joseis1906•3mo ago

I modified it a bit to look like a card. The codeSandBox can be found here https://codesandbox.io/p/sandbox/grid-row-columns-image-overflowing-out-of-grid-item-in-grid-layout-forked-ck6zlg I also included comments in the css to highlight the changes.

Gaming

Programming

grid-row-columns: image overflowing out of grid item in grid layout.

Did you find this page helpful?