当Grid遇到内容：一场关于对齐的“二人转”
各位看官，今天咱们聊聊CSS Grid布局里一对儿有趣儿的“活宝”—— align-content 和 justify-content。别被它们的名字吓着，虽然听起来专业，但实际上，它们的作用就像家里装修时，你指挥师傅把家具摆放在房间里的哪个位置一样。只不过，这次指挥的对象是Grid容器里的内容，而你的目标是让它们乖乖地按照你的想法排列。
咱们先来聊聊Grid布局，简单来说，它就像一张表格，你可以定义行和列，然后在这些“格子”里放东西。而align-content 和 justify-content 就像两位“包工头”，专门负责调整这些“东西”在Grid容器里的位置。
主角登场：align-content，一个略带“垂直洁癖”的家伙
align-content，从名字就能看出来，它和“align”有关，也就是“对齐”。但它可不是随便对齐的，它的关注点主要集中在垂直方向。想象一下，你把几本书横着放在一个大书架上，align-content 就像你在调整这几本书在书架高度上的位置。
align-content 生来就带着一些“洁癖”，它只有在Grid容器的高度大于Grid内容的高度之和时才会发挥作用。换句话说，只有当你的Grid容器里还有空余的垂直空间，它才能“大显身手”。否则，它就只能眼巴巴地看着，啥也干不了。
那么，align-content 都有哪些“绝招”呢？
-
stretch(默认值): “拉伸大法好！” 这是align-content最常用的招式。它会把Grid内容在垂直方向上均匀拉伸，填满整个Grid容器。注意，这里是拉伸内容本身，而不是调整内容之间的间距。想象一下，你把几块橡皮泥放在一个模具里，然后用力挤压，让它们填满整个模具。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); /* 定义行高 */ height: 500px; /* Grid容器高度大于内容高度之和 (3 * 100px = 300px) */ align-content: stretch; }在这个例子里，如果Grid item的高度小于100px，
align-content: stretch会让它们的高度被拉伸到100px。 -
start: “顶天立地，从上往下！” 这个招式会让Grid内容紧贴着Grid容器的顶部排列。就像你把几本书整整齐齐地码放在书架的最上面。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); height: 500px; align-content: start; }所有Grid item会紧贴着Grid容器的顶部排列，下方的空间则空着。
-
end: “脚踏实地，从下往上！” 和start正好相反，这个招式会让Grid内容紧贴着Grid容器的底部排列。就像你把几本书小心翼翼地放在书架的最下面。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); height: 500px; align-content: end; }所有Grid item会紧贴着Grid容器的底部排列，上方的空间则空着。
-
center: “居中大法，平衡之美！” 这个招式会让Grid内容在垂直方向上居中排列。就像你把一幅画挂在墙的正中央，上下留白，给人一种平衡的美感。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); height: 500px; align-content: center; }所有Grid item会在Grid容器的垂直方向上居中排列，上下方的空间均分。
-
space-between: “雨露均沾，间距相等！” 这个招式会让Grid内容之间的间距相等，并且首尾两端的内容分别紧贴着Grid容器的顶部和底部。就像你在几棵树之间种草，让每一棵树都沐浴着同样的阳光和雨露。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); height: 500px; align-content: space-between; }Grid item之间的间距相等，第一个Grid item紧贴顶部，最后一个Grid item紧贴底部。
-
space-around: “四面八方，雨露均沾！” 和space-between类似，但这个招式会在Grid内容的首尾两端也留出间距，并且这些间距是Grid内容之间间距的一半。就像你在几棵树周围都种上草，让每一棵树都感受到来自四面八方的关爱。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); height: 500px; align-content: space-around; }Grid item之间的间距相等，Grid item的首尾两端也有间距，且间距是Grid item之间间距的一半。
-
space-evenly: “绝对公平，人人平等！” 这个招式会让Grid内容之间的间距以及首尾两端的间距都完全相等。就像你在几个小朋友之间分糖果，保证每个人都拿到一样多的糖。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); height: 500px; align-content: space-evenly; }所有间距都相等，包括Grid item之间以及Grid item的首尾两端。
另一位主角：justify-content，一个横向思维的“老大哥”
如果说 align-content 是个略带“垂直洁癖”的家伙，那么 justify-content 就是一个横向思维的“老大哥”。 它的关注点主要集中在水平方向。想象一下，你把几本书竖着放在一个书架上，justify-content 就像你在调整这几本书在书架宽度上的位置。
和 align-content 类似，justify-content 也只有在Grid容器的宽度大于Grid内容的宽度之和时才会发挥作用。也就是说，只有当你的Grid容器里还有空余的水平空间，它才能“有用武之地”。
justify-content 的“绝招”和 align-content 非常相似，只不过方向从垂直变成了水平。
-
stretch(默认值): “横向拉伸，填满空间！” 这个招式会把Grid内容在水平方向上均匀拉伸，填满整个Grid容器。注意，这里是拉伸内容本身，而不是调整内容之间的间距。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 100px); /* 定义列宽 */ grid-template-rows: repeat(3, 1fr); width: 500px; /* Grid容器宽度大于内容宽度之和 (3 * 100px = 300px) */ justify-content: stretch; }在这个例子里，如果Grid item的宽度小于100px，
justify-content: stretch会让它们的宽度被拉伸到100px。 -
start: “靠左对齐，规规矩矩！” 这个招式会让Grid内容紧贴着Grid容器的左侧排列。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 1fr); width: 500px; justify-content: start; }所有Grid item会紧贴着Grid容器的左侧排列，右侧的空间则空着。
-
end: “靠右对齐，潇洒自在！” 和start正好相反，这个招式会让Grid内容紧贴着Grid容器的右侧排列。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 1fr); width: 500px; justify-content: end; }所有Grid item会紧贴着Grid容器的右侧排列，左侧的空间则空着。
-
center: “水平居中，恰到好处！” 这个招式会让Grid内容在水平方向上居中排列。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 1fr); width: 500px; justify-content: center; }所有Grid item会在Grid容器的水平方向上居中排列，左右两侧的空间均分。
-
space-between: “横向间距，均匀分布！” 这个招式会让Grid内容之间的间距相等，并且首尾两端的内容分别紧贴着Grid容器的左侧和右侧。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 1fr); width: 500px; justify-content: space-between; }Grid item之间的间距相等，第一个Grid item紧贴左侧，最后一个Grid item紧贴右侧。
-
space-around: “横向包围，雨露均沾！” 和space-between类似，但这个招式会在Grid内容的首尾两端也留出间距，并且这些间距是Grid内容之间间距的一半。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 1fr); width: 500px; justify-content: space-around; }Grid item之间的间距相等，Grid item的首尾两端也有间距，且间距是Grid item之间间距的一半。
-
space-evenly: “横向公平，人人平等！” 这个招式会让Grid内容之间的间距以及首尾两端的间距都完全相等。举个栗子：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 1fr); width: 500px; justify-content: space-evenly; }所有间距都相等，包括Grid item之间以及Grid item的首尾两端。
注意事项：
align-content作用于整个Grid容器的内容，而align-items作用于Grid容器内的单个Grid item。 这一点要区分清楚，不要混淆。justify-content作用于整个Grid容器的内容，而justify-items作用于Grid容器内的单个Grid item。 同样要区分清楚。- 如果Grid容器的大小正好等于Grid内容的大小，那么
align-content和justify-content就不会起任何作用。 因为没有多余的空间给它们发挥。 - 在
align-content和justify-content之外，还有place-content这个简写属性，它可以同时设置align-content和justify-content的值。 例如：place-content: center space-between;就相当于align-content: center; justify-content: space-between;
总结：
align-content 和 justify-content 是CSS Grid布局中非常重要的两个属性，它们可以让你轻松地控制Grid内容在Grid容器中的对齐方式。 掌握了它们，你就能够更加灵活地布局你的网页，让你的网页更加美观和易用。
希望这篇文章能帮助你更好地理解 align-content 和 justify-content 这对“活宝”，并在你的实际开发中灵活运用它们，打造出令人惊艳的网页布局！ 记住，实践是检验真理的唯一标准，多动手尝试，你一定能成为Grid布局的高手！