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

CSS Grid, unexpected gap

I’m facing unexpected gaps when building embedded css grids.

The layout is made of cards (3 cards per row) and each card sub-elements (orange / grey / black into my example) have to be aligned between each other (into the same row). The expected maximum height of a row should be based on the content of it’s cells. But height is much bigger than the cells content:

        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        .card {
            display: grid;
            grid-row-gap: 10px;
            grid-auto-rows: 1fr;
        }
        
        .header {
            background-color: orange;
        }
        
        
        .content {
            background-color: grey;
        }
        
        .footer {
            background-color: black;
            color: white;
        }
<div class="cards">
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
   </div>

What do I have to correct to this layout to not have those unexpected gaps?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have extended my initial example with a nested subgrid and I'm now facing alignment issues. The pink blocks are not aligned across rows. I've been playing with many different grid properties but there is definitely something I don't get about grids. Can someone help me with this?

            .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        .card {
            display: grid;
            grid-row-gap: 10px;
            grid-template-rows: subgrid;
            grid-row: span 3;
        }
        
        .header {
            background-color: orange;
        }
        
        
        .content {
            background-color: grey;
            display: grid;
        }
        
        .various {
            background-color: pink;
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 3;
        }
        
        .footer {
            background-color: black;
            color: white;
        }
    <div class="cards">
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
            <div class="various">
                <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                <div class="description">Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
            </div>
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
            <div class="various">
                <div class="name"></div>
                <div class="description"></div>
            </div>
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
            <div class="various">
                <div class="name">Lorem.</div>
                <div class="description">Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex. Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
            </div>
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
            <div class="various">
                <div class="name"></div>
                <div class="description"></div>
            </div>
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
            <div class="various">
                <div class="name"></div>
                <div class="description"></div>
            </div>
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
   </div>


  2. 0

    This is where subgrid comes in handy. Instead of grid-auto-rows: 1fr;, you want this:

    .card {
    display: grid;
    grid-row-gap: 10px;
    /* grid-auto-rows: 1fr; */
    grid-template-rows: subgrid;
    grid-row: span 3;
}

       .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        .card {
            display: grid;
            grid-row-gap: 10px;
            grid-template-rows: subgrid;
            grid-row: span 3;
        }
        
        .header {
            background-color: orange;
        }
        
        
        .content {
            background-color: grey;
        }
        
        .footer {
            background-color: black;
            color: white;
        }
    <div class="cards">
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
   </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search