如何将文本框与CSS Grid网格项实现横向对齐？

问题分析 #

当前布局的核心问题：文本框和图片网格分属两个独立容器，没有统一父容器控制并排；grid-item上的transform属性导致图片偏移，grid-container的margin: 0 auto让网格居中，进一步打乱对齐逻辑。

修正步骤 #

• 统一父容器：将文本框和网格容器放入同一个flex容器，用flex实现左右并排
• 移除偏移属性：删除所有grid-item上的transform，避免手动偏移破坏布局
• 调整网格容器margin：去掉grid-container的margin: 0 auto，防止网格居中
• 修复ID重复问题：HTML中多个图片共用同一ID，改为class保证唯一性
• 优化对齐细节：给父flex容器添加垂直对齐属性，确保文本和网格顶部对齐

修改后的代码 #

CSS代码

/* 统一父容器，实现左右并排+顶部对齐 */
.main-container {
  display: flex;
  align-items: flex-start;
  gap: 2rem; /* 文本和网格之间的间距 */
  padding: 0 1rem;
}

#grid-container{
    width: 600px;
    height: 600px;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0; /* 控制网格项间距，可按需调整 */
}
/* 把ID改为class，避免重复 */
.image{
    height: 300px;
    width: 350px;
}
.grid-item{
    width: 300px;
    height: 300px;
    display: flex;
}
.overview{
    width: 30%;
}
.overview-text{
    text-align: left; /* 左对齐更符合阅读习惯，可按需改回center */
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>How to layer and overlap elements</h1>
    </header>
    <!-- 添加统一的父flex容器 -->
    <div class="main-container">
        <div class="overview">
            <div class="overview-text">
                <h1>Overview Text</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                        culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                        culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                        culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
        <div id = "grid-container">
            <div class="grid-item">
                <img class = "image" src = "Image">
            </div>
            <div class="grid-item">
                <img class = "image" src = "Image/">
            </div>
            <div class="grid-item">
                <img class = "image" src = "Image/">
            </div>
            <div class="grid-item">
                <img class = "image" src = "Image">
            </div> 
        </div>
    </div>
</body>
</html>

额外说明 #

如果需要图片重叠效果，不要用transform，可通过调整grid-column/grid-row跨度，或给grid-item设置负margin实现，避免破坏整体布局对齐逻辑。

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