Grid布局即网格布局

最新推荐文章于 2024-02-02 10:45:00 发布

VIP文章 D in the box

最新推荐文章于 2024-02-02 10:45:00 发布

阅读量224

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_24484291/article/details/125982507

版权

Grid布局

Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

grid独有的像素单位 fr，用来处理空间剩余比例，是个弹性的单位。

.grid{
  display:grid;
  -grid-template-rows//设置行数
  -grid-template-columns//设置列数
  -row-gap//行间距
  -column-gap//列间距
}

一种是单元格整体对齐

一种是独立对齐

一种是内容区域对齐

单元格对齐方式水平+垂直
justify-items:center;
align-items:center;
内容区域对齐方式水平+垂直

 html,body{
margin: 0;
   }
   .main{
width: 800px;
height: 460px;
border: 1px solid gray;
margin: 20px auto;
/* 内容区域对齐 */
justify-content: center;
align-content: center;
   display: grid;
   grid-template-rows: 200px 200px;
   grid-template-columns: 200px 200px 200px;
   row-gap: 20px;
   column-gap: 20px;
   /*单元格整体对齐*/
   justify-items:center;
   align-items:center;