CSSGrid多列对齐技巧全解析

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《CSS Grid多列对齐方法详解》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

CSS Grid实现多列对齐的核心在于其灵活的轴线对齐属性，1. 使用justify-items和align-items控制所有项目在单元格内的水平和垂直对齐方式；2. 通过justify-self和align-self对特定项目进行独立调整；3. 利用justify-content和align-content控制整个网格在容器内的对齐方式；4. 在列宽不均时，结合justify-items与justify-self确保内容按需对齐；5. 当网格有剩余空间时，使用justify-content和align-content实现整体居中或均匀分布。

CSS的Grid布局在实现多列对齐上，核心在于它提供了极其灵活的轴线对齐属性，无论是针对网格内的单个项目，还是整个网格内容，都能精确控制。简单来说，它通过justify-items、align-items来对齐单元格内的内容，用justify-content、align-content来对齐整个网格，而justify-self和align-self则允许你对特定项目进行单独调整。

解决方案

要实现CSS Grid的多列对齐，我们首先得理解Grid布局是如何定义列和行的，以及它提供的各种对齐属性如何作用于不同的层面。

1. 定义网格结构： 这是基础。你得先用display: grid;把容器变成网格容器，然后用grid-template-columns来定义你的列。比如，grid-template-columns: 1fr 2fr 1fr; 定义了三列，宽度比例为1:2:1。列宽本身就是一种对齐的体现，它决定了每列的“空间”。

   

2. 单元格内项目的对齐（轴线对齐）： 这是最常用的对齐场景。

   • justify-items (水平方向，行轴)：这个属性作用于网格容器，它决定了网格容器内所有项目在其自身单元格内的水平对齐方式。
     • start：项目靠左对齐（或内容开始方向）。
     • end：项目靠右对齐（或内容结束方向）。
     • center：项目居中对齐。
     • stretch (默认值)：项目会拉伸填充整个单元格的宽度（如果项目没有设置自己的宽度）。
   • align-items (垂直方向，列轴)：同样作用于网格容器，决定了所有项目在其自身单元格内的垂直对齐方式。
     • start：项目靠上对齐。
     • end：项目靠下对齐。
     • center：项目垂直居中对齐。
     • stretch (默认值)：项目会拉伸填充整个单元格的高度（如果项目没有设置自己的高度）。

3. 单个项目特殊对齐：

   
   • justify-self (水平方向) 和 align-self (垂直方向)：这两个属性作用于网格项目本身。它们可以覆盖父容器上设置的justify-items和align-items，允许你对某个特定的网格项目进行独立的对齐控制。用法和justify-items/align-items类似。

4. 整个网格的对齐（当网格轨道有剩余空间时）：

   • justify-content (水平方向)：这个属性作用于网格容器，它决定了整个网格内容区域（所有列的总和）在网格容器内的水平对齐方式。这只有在所有列的总宽度小于网格容器宽度时才有效。
     • start：网格内容靠左。
     • end：网格内容靠右。
     • center：网格内容居中。
     • space-between：列之间平均分配空间，首尾列紧贴容器边缘。
     • space-around：列之间和两端都分配空间，两端空间是列之间空间的一半。
     • space-evenly：列之间和两端都平均分配空间。
   • align-content (垂直方向)：作用于网格容器，决定了整个网格内容区域（所有行的总和）在网格容器内的垂直对齐方式。这只有在所有行的总高度小于网格容器高度时才有效。用法和justify-content类似。

一个常见的实践场景： 如果你想让所有列中的内容都水平居中，同时垂直方向上都顶部对齐，你可以在容器上设置：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 比如三列 */
    justify-items: center; /* 所有项目在各自单元格内水平居中 */
    align-items: start;    /* 所有项目在各自单元格内垂直顶部对齐 */
}

如果某个特定项目需要垂直居中，你可以给它单独设置：

.grid-item-special {
    align-self: center; /* 覆盖父级的align-items */
}

Grid布局中，如何让不同行的内容在垂直方向上对齐？

这个问题，其实主要围绕着align-items和align-self这两个属性展开。我个人在做UI设计时，经常遇到卡片列表或者信息展示，需要不同高度的卡片在视觉上保持顶部对齐，或者底部对齐，甚至居中对齐。

默认情况下，align-items的值是stretch，这意味着网格项目会拉伸以填充其单元格的整个高度。这对于那些内容较少的单元格来说，可能会导致它们与内容较多的同伴一样高，从而使得内部文本或图片看起来没有对齐感。

如果你的目标是让所有行的内容在垂直方向上都从顶部开始，就像文字排版那样，那么你需要在网格容器上设置align-items: start;。这会强制所有网格项目都从其单元格的顶部开始放置，无论它们自身内容的高度是多少。

.my-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: start; /* 关键：所有项目都从各自单元格的顶部开始 */
}

但实际项目里，需求总是千变万化。有时候你会发现，大部分卡片需要顶部对齐，但有一张特殊的卡片，比如一个“立即购买”按钮的卡片，你希望它能垂直居中。这时候，align-self就派上用场了。你只需要给那个特殊的网格项目添加align-self: center;，它就会覆盖父容器的align-items: start;，实现局部居中。

    
内容1
    
特别居中的内容
    
内容3

这种细粒度的控制，让Grid在处理复杂布局时显得游刃有余，远比传统的浮动或Flexbox在多行对齐上更直观。

Grid布局下，如何处理列宽不均时内容的水平对齐问题？

列宽不均是Grid布局中非常常见的情况，比如你可能有一列是固定宽度（100px），另一列是自适应（1fr），还有一列是根据内容宽度决定（auto）。在这种情况下，如何确保每列中的内容都能按照你的意图进行水平对齐，就显得尤为重要。这里，justify-items和justify-self就是主角。

举个例子，我经常会构建一个布局，左边是图标（固定宽度），中间是标题和描述（自适应），右边是操作按钮（根据按钮内容宽度）。

.product-card {
    display: grid;
    grid-template-columns: 50px 1fr auto; /* 图标 | 内容 | 按钮 */
    align-items: center; /* 垂直方向让所有内容居中 */
    gap: 10px;
    border: 1px solid #eee;
    padding: 15px;
}

.icon {
    /* 默认stretch，但如果图标本身有尺寸，它会居中 */
    /* 如果图标比50px小，且你想它在50px空间内居中，可以：*/
    justify-self: center;
}

.title-description {
    /* 1fr列，内容通常会填满，但如果内容很短，你可能想它居中 */
    /* 默认是stretch，文本内容靠左对齐 */
    text-align: left; /* 这是文本对齐 */
}

.action-buttons {
    /* auto列，宽度由内容决定。如果按钮组很小，你可能想它靠右 */
    justify-self: end; /* 让按钮组在auto列中靠右对齐 */
}

这里有个小细节，justify-items和justify-self是对网格项目本身在其单元格内的水平对齐，而不是对项目内部的文本对齐。如果你想让一个

.page-wrapper {
    width: 1000px; /* 假设父容器宽度 */
    height: 500px; /* 假设父容器高度 */
    border: 2px dashed blue;
    display: grid; /* 父容器也需要是grid或flex才能用content对齐 */
    place-content: center; /* 快捷方式：同时设置justify-content和align-content为center */
    /* 等同于：
    justify-content: center;
    align-content: center;
    */
}

.my-small-grid {
    display: grid;
    grid-template-columns: repeat(3, 200px); /* 3列，每列200px，总宽600px */
    grid-template-rows: 150px; /* 1行，高150px */
    gap: 10px; /* 列和行之间的间距 */
    background-color: lightgoldenrodyellow; /* 方便看网格区域 */
}

.my-small-grid > div {
    background-color: lightcoral;
    padding: 10px;
    border: 1px solid red;
}