为什么此网格布局不起作用？具体来说：为什么子类为什么排成行而不是列？

Question

我正在尝试创建网格布局，以使有5个等距的列和6行，其中3行包含一个标题，该标题的下方是该行的名称，该标题是一个充满项目的部分（例如250x250像素正方形填充每个部分是我想要的结果）。

样式表看起来像（无礼）：

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

对于我的布局，似乎最容易做的事情可能是使主容器（网格）只有1列，并定义占据整个视口宽度的行，然后在嵌套网格或flexbox上进行定义我可以在其中指定宽度的项目。