Kevin Powell - Community•3d 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

8 Replies

DUDEYRUDEYOP•3d 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 🧀•3d ago

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

DUDEYRUDEYOP•3d ago

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

ἔρως•3d 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•3d 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?

ἔρως•3d ago

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

DUDEYRUDEYOP•2d 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?

ἔρως•2d ago

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

Gaming

Programming

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

Did you find this page helpful?