如何让CSS Grid中的Section标题独占整行显示？

我使用CSS Grid布局，容器每行最多容纳3个网格项，所有项高度一致，当一行不足3个时左对齐。现在需要在第一组网格项下方添加第二部分（Section Two），其中网格项高度与第一部分一致。但当前代码中，“Section 2”标题并未从新行开始，请问如何强制它独占一行显示？

要让Section 2的标题独占整行，核心是给标题所在容器添加grid-column: 1 / -1属性，该属性会让元素占据网格的所有列（从第一列延伸到最后一列）。同时需要修正原代码中破坏左对齐规则的错误设置。

修改后的CSS代码 #

.doc-details-grid-wrapper {
    margin: 40px 0 50px;
}

.doc-details-grid-wrapper h4 {
    padding-bottom: 0;
    text-align: left;
}

.doc-details-title {
    padding: 0 15px;
}

.doc-details-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    margin: 10px 0 50px;
    min-height: 200px;
    list-style: none;
    gap: 10px; /* 用Grid原生gap统一控制间距，替代margin更规范 */
}

.doc-details-grid>a {
    background-color: #2A88A6;
    border-radius: var(--bs-border-radius-lg)!important;
    display: flex;
    flex-direction: column;
    padding: 15px; /* 补充内边距，优化内容显示 */
}

.doc-details-grid>a:hover {
    background-color: #136A85;
}

/* 移除原有的:last-child居中规则，保证不足3个项时左对齐 */
/* .doc-details-grid>a:last-child {
    grid-column-start: 2;
} */

.doc-details-grid h5 {
    padding-bottom: 0;
    color: #fff;
}

.doc-details-grid p {
    color: #ffffff;
    flex-grow: 1; /* 让段落填充空间，保证所有网格项高度一致 */
}

/* 让Section标题独占整行 */
.doc-details-grid .doc-details-title {
    grid-column: 1 / -1;
    margin: 20px 0; /* 增加上下间距，区分不同区块 */
}

/* DOCS END */

@media (min-width: 768px) {
    .masthead {
        max-width: none;
        min-height: 70vh;
    }
    h1 {
        font-size: calc(1.0rem + 2.3vw);
        margin: unset!important;
    }
    .docs-grid>a {
        display: flex;
        flex-basis: calc(50% - 40px);
        justify-content: center;
        flex-direction: column;
    }
    .doc-details-grid>a {
        flex-basis: calc(33% - 40px);
    }
}

修改后的HTML代码 #

<div class="container d-flex flex-column flex-grow-1 justify-content-center">
    <div class="row text-center">
        <div class="col-12 text-center">
            <div class="doc-details-grid-wrapper">
                <div class="doc-details-title">
                    <h4>Section 1</h4>
                    <hr>
                </div>
                <div class="doc-details-grid">
                    <a href="" class="box1 callout">
                        <h5>Section 1 Box 1</h5>
                        <p>Short description goes here. This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
                    </a>
                    <a href="" class="box2 callout">
                        <h5>Section 1 Box 2</h5>
                        <p>Short description goes here.</p>
                    </a>
                    <a href="" class="box3 callout">
                        <h5>Section 1 Box 3</h5>
                        <p>This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
                    </a>
                    <a href="" class="box4 callout">
                        <h5>Section 1 Box 4</h5>
                        <p>This is where you can provide a brief preview about the contents of the downloadable PDF document. This description is a little longer than the others.</p>
                    </a>
                    <a href="" class="box5 callout">
                        <h5>Section 1 Box 5</h5>
                    </a>
                    <div class="doc-details-title">
                        <h4>Section 2 - This should start underneath the above five boxes on its own row.</h4>
                        <hr>
                    </div>
                    <a href="" class="box6 callout">
                        <h5>Section 2 Box 1</h5>
                        <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                    </a>
                    <a href="" class="box6 callout">
                        <h5>Section 2 Box 2</h5>
                        <p>This is the second grid object in Section 2.</p>
                    </a>
                    <a href="" class="box6 callout">
                        <h5>Section 2 Box 3</h5>
                        <p>This is the third grid object in Section 2.</p>
                    </a>
                    <a href="" class="box6 callout">
                        <h5>Section 2 Box 4</h5>
                        <p>This is the fourth grid object in Section 2.</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

关键说明 #

1. grid-column: 1 / -1：这是实现标题独占整行的核心属性，它指定元素从网格第一列开始，延伸到最后一列，强制占据整行空间。
2. 移除错误的居中规则：原代码中.doc-details-grid>a:last-child { grid-column-start: 2; }会让最后一个网格项居中，破坏“不足3个时左对齐”的需求，因此需要移除。
3. 优化高度一致性：给网格项内的段落添加flex-grow: 1，让段落自动填充剩余空间，确保所有网格项高度完全一致。

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