CSS Grid外层容器定位影响内层元素布局问题及实现需求

我写了下面的CSS和HTML代码，运行后发现#inner-div自己设置的grid行列属性完全没用，位置全由父容器#outer-div的grid定位决定——调#inner-div的列号根本没反应，只有改#outer-div的定位才生效。

我现在想让#outer-div包含多个inner-div，让这些子元素在第2、3列交替排列（左→右→左…）。但如果把#outer-div的grid-column-end设为4，内层元素会被拉伸得覆盖2、3列，我想要那种类似Yellow Leaf Hammocks官网关于我们页面的flex布局效果。

原CSS代码：

#outer-outer {
    text-align: center;
    display: grid;
    grid-template-columns: 5vw 45vw 45vw 5vw;
    grid-template-rows: 30vh 29vh 29vh 29vh 29vh 29vh;
    grid-template-areas: ". header header ." ". main main ." ". main main ." ". main main ." ". main main ." ". main main .";
    justify-items: center;
    justify-content: space-evenly;
}

#quote{
    font-weight: bold;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    white-space: pre-line;
}


#what-is-ll{
    font-size: x-large;
    font-weight: lighter;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
#outer-div{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}
#inner-div{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

原HTML代码：

<div id ="outer-outer">

    <h1 id = "quote">
        Lorem Ipsum
    </h1>

    <div id="what-is-ll">
        <h2 id="what-is-ll-title">

        </h2>
        <div id="what-is-ll-body">
            <p>
                Lorem Ipsum
            </p>
        </div>

    </div>

    <div id="outer-div">
        <h2 id="inner-div">
            Why make this?
        </h2>
    </div>
</div>

核心思路是让#outer-div占据#outer-outer的第2到第4列（中间两列的整个宽度），然后把#outer-div改成flex垂直布局，通过控制子元素的对齐方式实现左右交替排列：

1. 调整#outer-div的grid定位，让它占满中间两列的空间，并设置为flex容器：

   #outer-div{
       grid-column: 2 / 4; /* 简化写法，直接指定列范围 */
       grid-row: 2 / -1; /* 从第2行延伸到最后一行，留出足够空间放多个子元素 */
       display: flex;
       flex-direction: column;
       gap: 20px; /* 子元素之间的间距，可按需调整 */
       padding: 20px 0;
   }
   

2. 给#outer-div的子元素设置基础样式，用nth-child选择器控制奇偶项的对齐方式：

   .inner-div{
       width: 45vw; /* 和外层grid的列宽保持一致，避免拉伸 */
       padding: 10px;
       box-sizing: border-box;
       margin: 0; /* 去除h2默认margin，避免间距混乱 */
   }
   /* 奇数项靠左对齐 */
   .inner-div:nth-child(odd){
       align-self: flex-start;
   }
   /* 偶数项靠右对齐 */
   .inner-div:nth-child(even){
       align-self: flex-end;
   }
   

3. 修改HTML，将重复的inner-div从id改为class（id不能重复），并添加多个子元素：

   <div id="outer-div">
       <h2 class="inner-div">Why make this?</h2>
       <h2 class="inner-div">Second item</h2>
       <h2 class="inner-div">Third item</h2>
       <h2 class="inner-div">Fourth item</h2>
   </div>
   

4. 移除原来#inner-div的grid相关属性，因为现在它是flex子元素，不需要这些属性。

完整修改后的CSS代码：

#outer-outer {
    text-align: center;
    display: grid;
    grid-template-columns: 5vw 45vw 45vw 5vw;
    grid-template-rows: 30vh repeat(5, 29vh); /* 用repeat简化重复行定义 */
    grid-template-areas: ". header header ." ". main main ." ". main main ." ". main main ." ". main main ." ". main main .";
    justify-items: center;
    justify-content: space-evenly;
}

#quote{
    font-weight: bold;
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    white-space: pre-line;
}

#what-is-ll{
    font-size: x-large;
    font-weight: lighter;
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

#outer-div{
    grid-column: 2 / 4;
    grid-row: 2 / -1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.inner-div{
    width: 45vw;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
}

.inner-div:nth-child(odd){
    align-self: flex-start;
}

.inner-div:nth-child(even){
    align-self: flex-end;
}

完整修改后的HTML代码：

<div id ="outer-outer">
    <h1 id = "quote">
        Lorem Ipsum
    </h1>

    <div id="what-is-ll">
        <h2 id="what-is-ll-title"></h2>
        <div id="what-is-ll-body">
            <p>Lorem Ipsum</p>
        </div>
    </div>

    <div id="outer-div">
        <h2 class="inner-div">Why make this?</h2>
        <h2 class="inner-div">Second alternating item</h2>
        <h2 class="inner-div">Third alternating item</h2>
        <h2 class="inner-div">Fourth alternating item</h2>
    </div>
</div>

这样修改后，#outer-div里的子元素就会在中间两列左右交替排列，完全符合需求。关键是利用flex的align-self属性控制每个子元素的位置，同时保持子元素宽度和外层grid列宽一致，避免拉伸问题。

内容的提问来源于stack exchange，提问作者aSquaredRush