CSS Grid布局异常：grid-column:1/2未占2列的修复方案

问题现象 #

为带描述的区块设置grid-column:1/2时，预期占据第1、2列宽度，但实际仅占1列，布局未达到预期效果：

问题原因 #

Grid布局中grid-column: a/b的取值是网格线的编号，而非列数：

• grid-column:1/2表示从第1根网格线开始，到第2根网格线结束，仅覆盖1列
• 要覆盖第1、2列，需要从第1根线到第3根线，即grid-column:1/3

另外，给带描述的区块设置了固定宽度width:887px，会干扰Grid容器的自动列宽分配，可能导致布局溢出或错位。

修复方案 #

1. 修正grid-column的取值 #

将带描述区块的grid-column值修改为覆盖目标列数对应的网格线：

• 要占据第1、2列：grid-column:1/3（或简写为grid-column:span 2）
• 要占据第2、3列：grid-column:2/4（或简写为grid-column:span 2）

2. 移除固定宽度限制 #

删除.example-item-with-right-description和.example-item-with-left-description中的width:887px，让Grid容器根据列配置自动分配宽度，保证布局适配性。

修改后的代码示例 #

CSS部分 #

body {
    width: 1440px;
}

.examples-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-row-gap: 44px;
    grid-column-gap: 44px;
    padding: 44px;
}

.example-item {
    width: 422px;
    height: 392px;
    background: #D9D9D9;
    border-radius: 24px;
}

/* 移除固定width属性 */
.example-item-with-right-description {
    display: flex;
    height: 392px;
    border-radius: 24px;
    border: 1px solid #000;
    align-items: center;
    justify-content: space-around;
}

/* 移除固定width属性 */
.example-item-with-left-description {
    display: flex;
    background: #D9D9D9;
    height: 392px;
    border-radius: 24px;
    border: 1px solid #000;
    align-items: center;
    justify-content: space-around;
}

.example-item-with-inner-dark {
    background: #D9D9D9;
    width: 358px;
    height: 328px;
    border-radius: 16px;
}

.example-item-with-inner-light {
    background: #F1F1F1;
    width: 358px;
    height: 328px;
    border-radius: 16px;
}

.example-item-description {
    width: 401px;
}

.example-item-image-container {
    width: 100%;
    height: 100%;
    width: 212px;
    height: 310px;
    margin: 44px 110px;
}

.img-div {
    max-width: 100%;
    max-height: 100%;
    width: 212px;
    height: 310px;
    border-radius: 12px;
    background: red;
}

.example-item-image-container-small {
    width: 156px;
    height: 228px;
    margin: 44px 110px;
}

HTML部分 #

<!DOCTYPE html>
<html>
<body>
    <main>
        <div class="examples-block" style="height: 1469px;">
            <div class="example-item" style="grid-column: 1; grid-row: 1;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item" style="grid-column: 2; grid-row: 1;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item" style="grid-column: 3; grid-row: 1;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <!-- 修改为grid-column:1/3 -->
            <div class="example-item-with-right-description" style="grid-column: 1/3; grid-row: 2;">
                <div class="example-item-with-inner-dark">
                    <div class="example-item-image-container-small">
                        <div class="img-div"></div>
                    </div>
                </div>
                <div class="example-item-description">
                    <h3>DESCRIPTION</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                </div>
            </div>
            <div class="example-item" style="grid-column: 3; grid-row: 2;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <div class="example-item" style="grid-column: 1; grid-row: 3;">
                <div class="example-item-image-container">
                    <div class="img-div"></div>
                </div>
            </div>
            <!-- 修改为grid-column:2/4 -->
            <div class="example-item-with-left-description" style="grid-column: 2/4; grid-row: 3;">
                <div class="example-item-with-inner-light">
                    <div class="example-item-image-container-small">
                        <div class="img-div"></div>
                    </div>
                </div>
                <div class="example-item-description">
                    <h3>DESCRIPTION</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur pulvinar lacus, sit amet cursus est tincidunt a.</p>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

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