CODEWITHSUNDEEP
htmlcsscss-grid
Sean Kimball
Sean Kimball

Reputation: 4494

Nested css grid is not displaying nested items

I'm having an issue with a nested CSS GRID - the nested grid items are not displaying correctly - have checked the markup over and over, but I d not see the error.

the first grid row should span three columns (which it does) and the grid item is set as a display:grid with 2 child grid items, the child items are not spanning the correct columns.

Can anyone explain why this is not working?

FIDDLE HERE: https://jsfiddle.net/qL683ubz/1/

here is the css: 

.insights-grid-container {
    display: grid;
    max-width: 998px;
    margin: 0px auto;
    grid-template-columns: auto auto auto;
    grid-template-rows: 300px 300px 300px 300px 300px;
    grid-gap: 5px 5px;
    background-color: #ccc;
}

.insights-grid-container div {
    background-color: #fff;
}

.insights-grid-container > div > div:first-child {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* row, column, row, column */
.insights-grid-container .article.hero  {
    grid-area: 1 / 1 / span 1 / span 3;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 300px;
    grid-gap: 5px 5px;
    background-color: #cc0000;
}
    .insights-grid-container > .article.hero > div:first-child {
        grid-area: 1 / 1 / span 1 / span 2;
    }
    .insights-grid-container > .article.hero > div:last-child {
        grid-area: 1 / 3 / span 1 / span 1;
    }





.insights-grid-container > .article.event {
    grid-template-columns: auto;
    grid-template-rows: 90px;
}

.insights-grid-container > .article.aside-left {}
.insights-grid-container > .article.aside-right {}

and here is the grid: 

<div class="insights-grid-container">

    <div class="article hero">
        <div style="background-image: url(https://via.placeholder.com/600x300);" />image</div>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>

    <div class="article aside-left">
        <div style="background-image: url(https://via.placeholder.com/300x300);" />1 </div>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>

    <div class="article"><h3>2</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>3</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>4</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>5</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>


    <div class="article aside-right">
        <div style="background-image: url(https://via.placeholder.com/300x300);" />1 </div>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>


    <div class="article"><h3>2</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>3</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>4</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>5</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

    <div class="article event"><h3>event</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

</div>

Upvotes: 1

Views: 132

Answers (1)

F&#233;lix Adriyel Gagnon-Grenier
F&#233;lix Adriyel Gagnon-Grenier

Reputation: 8885

Subgrids are actually unaware (with the current level 1 grid specification) of any and all grids that happen anywhere up (or down) in the dom.

When an element has the display: grid property, a new grid is defined. Grid rules will apply only to the very first level children of that grid element.

That being said, I believe what you wish for instead of the grid-template-columns: auto auto auto; rules is grid-template-columns: 1fr 1fr 1fr;. That will prevent a non-existing image to be shrinked to its non existing content.

fr is the "fraction" measurement unit. 1fr 1fr 1fr instructs the grid to have three tracks (it works in both direction, row and column) which share exactly the space that is left after giving other hard rules of placing.

Here is an updated fiddle where the first element of the subgrid correctly (if I understand correctly) spans the two first columns.

Upvotes: 2

Related Questions