CSS弹性网格列布局：行高不同时如何让文本顶部对齐？

问题分析 #

你的代码里右侧黄色文本和左侧不对齐，核心原因有三点：

• <p>标签默认带有margin-top，会导致内容初始位置偏移
• 网格容器未明确设置子元素垂直对齐规则，行高差异进一步放大了偏移
• 类名重复定义（如.columnA和.comment.columnA）造成样式优先级混乱

修正方案 #

以下是调整后的代码，既解决了顶部对齐问题，也支持1/2/3列自适应布局，标题居中显示在对应内容上方：

<html>
    <head>
        <style>
            /* 重置p标签默认边距，消除顶部偏移根源 */
            p {
                margin: 0;
            }

            .column {
                padding: 0 10px; /* 用内边距实现列间距，避免margin布局冲突 */
            }

            /* 按样式需求定义列类 */
            .column--green {
                color: green;
                line-height: 1.4;
            }

            .column--yellow {
                color: yellow;
                line-height: 2.4;
            }

            .column--white {
                color: white;
            }

            /* 标题容器：网格布局，保障标题顶部对齐+居中 */
            .section-title {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                margin-bottom: 20px;
                align-items: start; /* 强制标题从顶部开始对齐 */
            }

            .section-title__item {
                text-align: center;
            }

            /* 内容容器：网格布局，支持1-3列自适应，内容顶部对齐 */
            .content-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 15px; /* 用网格gap设置列间距，布局更稳定 */
                margin-bottom: 20px;
                align-items: start; /* 无视行高差异，所有列内容从顶部起始 */
            }

            .black-background {
                background-color: black;
                padding: 20px; /* 给页面加内边距，避免内容贴边 */
            }
        </style>
    </head>
    <body class="black-background">
        <div class="content-section">
            <div class="section-title">
                <p class="section-title__item column column--white">TitleA</p>
                <p class="section-title__item column column--yellow">TitleB</p>
                <!-- 可直接添加第三列测试布局 -->
                <p class="section-title__item column column--white">TitleC</p>
            </div>
            <div class="content-grid">
                <p class="column column--green">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
                <p class="column column--yellow">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
                <!-- 可直接添加第三列测试布局 -->
                <p class="column column--green">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
            </div>
        </div>
    </body>
</html>

核心优化点 #

• 重置<p>默认margin：彻底解决浏览器默认样式导致的顶部偏移
• 网格容器设置align-items: start：强制所有列内容从容器顶部开始排列，不受行高差异影响
• 用gap替代margin设置列间距：避免margin叠加导致的布局混乱，符合网格布局规范
• 类名结构化：采用BEM命名规则，避免样式冲突，方便扩展到3列
• 自适应列宽：minmax(250px, 1fr)实现屏幕宽度足够时显示2/3列，窄屏自动折叠为1列

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