为什么这个网格布局不起作用？ 具体来说：为什么嵌套的项目是按行排列而不是放在网格上的？

Question

I am trying to create a grid layout, such that there are 5 equal spaced columns, and 6 rows, 3 of the rows contain a header with the name of the row beneath, which is a section full of items (think 250x250 pixel squares filling each section is the result i'm aiming for).

Stylesheet looks like (in sass):

    .offerings-index-grid-wrapper
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 25px auto 25px auto 25px auto;

        max-width: 100vw;


     }

    .offerings-index-grid-category
    {
        grid-column-start: 1;
        grid-column-end: 5;

        &.cat1
        {
            grid-row-start: 1;
            grid-row-end: 2;
        }

        &.cat2
        {
            grid-row-start: 3;
            grid-row-end: 4;
        }

        &.cat3
        {
        grid-row-start: 5;
        grid-row-end: 6;
    } }


    .offerings-index-grid-offeringssection
    {
        grid-column-start: 1;
        grid-column-end: 5;

        &.sect1
        {
            grid-row-start: 2;
            grid-row-end: 3;
        }

        &.sect2
        {
            grid-row-start: 4;
            grid-row-end: 5;
        }

        &.sect3
        {
            grid-row-start: 6;
            grid-row-end: 7;
        }
    }

    .offerings-index-grid-offering
    {
        display: flex;
        text-decoration: none;
        color: $offering-link-text-color;

        -ms-grid-column-span: 1;
        column-span: 1;

        &.offerings-index-grid-offering:focus
        {
            text-decoration: none;
            color: $offering-link-text-color;
        }

        &.offerings-index-grid-offering:visited
        {
            text-decoration: none;
           color: $offering-link-text-color;
        }

        &.offerings-index-grid-offering:hover
        {
            text-decoration: none;
            color: $offering-link-text-color-hover;
        }

        &.offerings-index-grid-offering:active
        {
            text-decoration: none;
            color: $offering-link-text-color;
    } }

Here is the view:

 .offerings-index-grid-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; -ms-grid-rows: 25px auto 25px auto 25px auto; grid-template-rows: 25px auto 25px auto 25px auto; max-width: 100vw; height: 1275px; }.offerings-index-grid-category { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 5; }.offerings-index-grid-category.cat1 { -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 2; }.offerings-index-grid-category.cat2 { -ms-grid-row: 3; grid-row-start: 3; grid-row-end: 4; }.offerings-index-grid-category.cat3 { -ms-grid-row: 5; grid-row-start: 5; grid-row-end: 6; }.offerings-index-grid-offeringssection { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 5; }.offerings-index-grid-offeringssection.sect1 { -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3; }.offerings-index-grid-offeringssection.sect2 { -ms-grid-row: 4; grid-row-start: 4; grid-row-end: 5; }.offerings-index-grid-offeringssection.sect3 { -ms-grid-row: 6; grid-row-start: 6; grid-row-end: 7; }.offerings-index-grid-offering { display: -webkit-box; display: -ms-flexbox; display: flex; text-decoration: none; color: #527b52; -ms-grid-column-span: 1; -webkit-column-span: 1; column-span: 1; }.offerings-index-grid-offering.offerings-index-grid-offering:focus { text-decoration: none; color: #527b52; }.offerings-index-grid-offering.offerings-index-grid-offering:visited { text-decoration: none; color: #527b52; }.offerings-index-grid-offering.offerings-index-grid-offering:hover { text-decoration: none; color: #459745; }.offerings-index-grid-offering.offerings-index-grid-offering:active { text-decoration: none; color: #527b52; }

 <div class="offerings-index-grid-wrapper"> <div class="offerings-index-grid-category cat1"> <h3>Category1</h3> </div> <div class="offerings-index-grid-offeringssection sect1"> <a href="" class="offerings-index-grid-offering"> Hey I'm an offering. <img class="offering-image" src=\svg\Example.svg> </a> <a href="" class="offerings-index-grid-offering"> Hey I'm an offering. <img class="offering-image" src=\svg\Example.svg> </a> <a href="" class="offerings-index-grid-offering"> Hey I'm an offering. <img class="offering-image" src=\svg\Example.svg> </a> </div> <div class="offerings-index-grid-category cat2"> <h3>Category2</h3> </div > <div class="offerings-index-grid-offeringssection sect2"> <a href="" class="offerings-index-grid-offering"> Hey I'm an offering! <img class="offering-image" src=\svg\Example.svg> </a> </div> <div class="offerings-index-grid-category cat3"> <h3>Category3</h3> </div> <div class="offerings-index-grid-offeringssection sect3"> <a href="" class="offerings-index-grid-offering"> Hey I'm an offering! <img class="offering-image" src=\svg\Example.svg> </a> </div> </div>

What I end up with is something that looks like this:

Category1
item 1
item 2
item 3
Category2
item 1
Category3
item 1

But I am trying to get this:

Category1
item 1 item 2 item 3
Category2
item 1
Category3
item 1

Also concerningly, when inspecting in browser, it looks like the categories and sub sections are not a part of the grid at all. (They do not show the two classes.offerings-index-grit-category or.offerings-index-grid-offeringssection)

Answer 1

Okay, figured out what I'm doing wrong here. for CSS grid to work only the direct children elements of the grid will be grid items. So in this case I defined my columns with the goal of using them for nested elements inside of a grid item which will not work. I need to declare an additional grid or flexbox etc inside of my sections that contain the items.

And for my layout it looks like probably the easiest thing to do might be to make the main container (the grid) just have like 1 column and define my rows that take up the whole viewport width and then on the nested grids or flexbox for the items that is where I can work to specify their widths.