Почему этот макет сетки не работает? В частности: почему вложенные элементы расположены в ряды, а не на сетке?

Question

• 1000 пиксельные квадраты, заполняющие каждую секцию, - это результат, к которому я стремлюсь).

Таблица стилей выглядит (в 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;
    } }

Вот вид:

.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>

То, что я получаю, выглядит примерно так:

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

Но я пытаюсь получить это:

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

Также, что касается просмотра в браузере, похоже, что категории и подразделы вообще не являются частью сетки. (Они не отображают два класса .offerings-index-grit-category или .offerings-index-grid-offeringssection)

Answer 1

Ладно, разобрался, что я здесь делаю не так. для работы сетки CSS только прямые дочерние элементы сетки будут элементами сетки. Итак, в этом случае я определил свои столбцы с целью использовать их для вложенных элементов внутри элемента сетки, который не будет работать. Мне нужно объявить дополнительную сетку или flexbox et c внутри моих разделов, содержащих элементы.

И для моего макета кажется, что, вероятно, проще всего было бы сделать основной контейнер (сетку) всего одним столбцом и определить мои строки, которые занимают всю ширину области просмотра, а затем на вложенные сетки или flexbox для элементов, где я могу работать, чтобы указать их ширину.