如何通过css grid align-items调整子元素对齐

来源：3D模型作者：老毕头衔：草根站长

导读：本期聚焦于小伙伴创作的《如何通过css grid align-items调整子元素对齐》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何通过css grid align-items调整子元素对齐》有用，将其分享出去将是对创作者最好的鼓励。

CSS Grid布局是目前前端开发中非常常用的二维布局方案，在网格容器内，我们可以通过align-items属性快速调整所有子元素在交叉轴方向的对齐效果，不需要逐个给子元素设置对齐样式，大幅提升布局效率。

align-items属性基础语法

align-items是应用在网格容器上的CSS属性，用于设置网格容器内所有子元素在交叉轴（默认是垂直方向）上的对齐方式，它的基本语法如下：

/* 网格容器基础设置 */
.grid-container {
    display: grid;
    /* 定义3列，每列宽度100px */
    grid-template-columns: repeat(3, 100px);
    /* 定义2行，每行高度80px */
    grid-template-rows: repeat(2, 80px);
    /* 设置子元素交叉轴对齐方式 */
    align-items: center;
    gap: 10px;
    width: 350px;
    background-color: #f0f0f0;
    padding: 10px;
}

.grid-item {
    background-color: #4a90e2;
    color: white;
    text-align: center;
    line-height: 40px;
}

align-items常用取值及效果

align-items有多个可选取值，不同取值对应不同的对齐效果，下面逐一说明：

1. stretch（默认值）

当align-items取值为stretch时，子元素会被拉伸以填满网格单元格的交叉轴方向高度，如果子元素自身没有设置固定高度，会直接撑满整个单元格高度。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 80px);
    /* 默认值，子元素拉伸填满单元格高度 */
    align-items: stretch;
    gap: 10px;
    width: 350px;
    background-color: #f0f0f0;
    padding: 10px;
}

2. start

start取值会让所有子元素在网格单元格的交叉轴起始位置对齐，默认情况下就是顶部对齐。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 80px);
    /* 子元素顶部对齐 */
    align-items: start;
    gap: 10px;
    width: 350px;
    background-color: #f0f0f0;
    padding: 10px;
}

3. end

end取值会让所有子元素在网格单元格的交叉轴结束位置对齐，默认情况下就是底部对齐。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 80px);
    /* 子元素底部对齐 */
    align-items: end;
    gap: 10px;
    width: 350px;
    background-color: #f0f0f0;
    padding: 10px;
}

4. center

center取值会让所有子元素在网格单元格的交叉轴中间位置对齐，也就是垂直居中对齐。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 80px);
    /* 子元素垂直居中对齐 */
    align-items: center;
    gap: 10px;
    width: 350px;
    background-color: #f0f0f0;
    padding: 10px;
}

5. baseline

baseline取值会让所有子元素按照它们的基线对齐，如果子元素的文字大小不同，会按照文字的基线位置对齐。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 80px);
    /* 子元素基线对齐 */
    align-items: baseline;
    gap: 10px;
    width: 350px;
    background-color: #f0f0f0;
    padding: 10px;
}

/* 让第二个子元素文字更大，方便看基线效果 */
.grid-item:nth-child(2) {
    font-size: 20px;
}

align-items和justify-items的区别

很多开发者会混淆这两个属性，它们的核心区别是作用轴不同：

align-items作用于交叉轴，默认是垂直方向，控制子元素的垂直对齐
justify-items作用于主轴，默认是水平方向，控制子元素的水平对齐

如果需要同时调整水平和垂直对齐，可以两个属性配合使用。

注意事项

使用align-items时需要注意以下几点：

align-items是容器属性，需要写在网格容器上，而不是子元素上
如果子元素自身设置了align-self属性，会覆盖容器的align-items设置
当网格容器的交叉轴方向尺寸没有明确设置时，stretch效果可能不会生效，因为单元格没有固定高度可供拉伸

实际使用示例

下面是一个完整的HTML示例，展示不同align-items取值的实际效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid align-items示例</title>
    <style>
        .demo-container {
            margin-bottom: 30px;
        }
        .demo-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(2, 80px);
            gap: 10px;
            width: 350px;
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: 10px;
        }
        .grid-item {
            background-color: #4a90e2;
            color: white;
            text-align: center;
            line-height: 40px;
        }
        /* 不同对齐方式的容器 */
        .stretch-container {
            align-items: stretch;
        }
        .start-container {
            align-items: start;
        }
        .center-container {
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <div class="demo-title">align-items: stretch（默认）</div>
        <div class="grid-container stretch-container">
            <div class="grid-item">项目1</div>
            <div class="grid-item">项目2</div>
            <div class="grid-item">项目3</div>
            <div class="grid-item">项目4</div>
            <div class="grid-item">项目5</div>
            <div class="grid-item">项目6</div>
        </div>
    </div>

    <div class="demo-container">
        <div class="demo-title">align-items: start</div>
        <div class="grid-container start-container">
            <div class="grid-item">项目1</div>
            <div class="grid-item">项目2</div>
            <div class="grid-item">项目3</div>
            <div class="grid-item">项目4</div>
            <div class="grid-item">项目5</div>
            <div class="grid-item">项目6</div>
        </div>
    </div>

    <div class="demo-container">
        <div class="demo-title">align-items: center</div>
        <div class="grid-container center-container">
            <div class="grid-item">项目1</div>
            <div class="grid-item">项目2</div>
            <div class="grid-item">项目3</div>
            <div class="grid-item">项目4</div>
            <div class="grid-item">项目5</div>
            <div class="grid-item">项目6</div>
        </div>
    </div>
</body>
</html>

CSS_grid align-items 子元素对齐网格布局修改时间：2026-07-23 09:45:36

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。