作用：CSS align-items 属性设置了所有直接子元素的 align-self 值作为一个组。在 Flexbox 中，它控制子元素在交叉轴上的对齐。在 Grid 布局中，它控制了子元素在其网格区域内的块向轴上的对齐。
应用对象：影响网格容器内的所有网格项目。
值：normal、start、end、center、stretch、baseline 等。
示例：设置 align-items: center; 会使所有网格项目在容器的垂直方向上居中对齐。与类似，如果不设任何值，默认
效果展示如下，每行子元素的高度做了strech，保证行内各元素高度相同
将布局改为,可以看到子元素高度没有撑高，元素在每行内垂直居中。
align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
通常，如果不设置grid 容器的高度，容器高度由子元素的高度决定，如上面的例子那样外层容器高度为内容1【h: 50】和内容5【h:30】之和80。此时设置属性没有意义。如果将grid container的高度设置的更大一些，这个时候将发挥其作用。
改变对应属性值，可以查看相应的布局效果。线上演示
CSS 的 justify-items 属性为所有盒中的项目定义了默认的 justify-self ，可以使这些项目以默认方式沿适当轴线对齐到每个盒子。线上演示
grid布局中，justify-items统一设置每个网格项目中的布局，其属性设在网格容器上，如果单独为某一网格单独设置布局，则在网格项目上设置justify-self属性。
图中虚线为每个网格项目，
在上面的示例中，如果想让第一行第四列的内容居右，可以单独为其设置
这里设置容器600,4个网格宽度合计400，会有留白，此时设置justify-content属性可以看见其布局效果。
从整体实验的数据来看，可以简单的得出一个结论，便于记忆和区分：xx-content用于控制网格项目的水平或者垂直布局，xx-items用户控制网格项目中的内容的布局。如果初始未设置对应属性的值，理论上默认是stretch，一旦设置了值，其内容根据设置值决定大小。
到此这篇grid布局属性（grid布局居中）的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/51881.html