学习猿地|第2章网页重构16 grid布局，【融职培训】Web前端学习一、grid布局概述grid布局与flex布局对

一、grid布局概述
grid布局与flex布局对比
grid布局可以为网页提供更强大的布局功能，它与flex布局的区别是。
flex布局为一维布局，一般一行或一列的布局使用flex布局。
grid布局为二维布局，同时需要兼顾行与列的布局，可以使用gird布局。
如果不考虑兼容问题， flex布局和grid布局可以很好地替代浮动布局。
grid布局基本概念
grid容器的水平区域成为行（row），垂直区域成为列（column），行与列之间的较差与是单元格（cell），划分网格的线成为网格线（girdline），了解了这些基本概念之后，就可以开始用相应的css属性设置grid容器中的项目了。
二、grid容器
设置gird容器
通过下面代码可以将一个容器设置成为一个grid容器。
1.container{2display:grid;3}
gird容器内部的元素称为grid容器的项目， grid项目的float属性会失效，通过grid容器的进一步设置，可以让内部的项目按要求排列。
grid-template-columns属性与grid-template-rows属性
【学习猿地|第2章网页重构16 grid布局，【融职培训】Web前端学习】grid-template-columns可以设置gird容器中的项目有多少列，并指定列的宽度，实例代码如下所示
1<divclass=''container''>2<divclass=''item''>1</div>3<divclass=''item''>2</div>4<divclass=''item''>3</div>5<divclass=''item''>4</div>6<divclass=''item''>5</div>7<divclass=''item''>6</div>8<divclass=''item''>7</div>9<divclass=''item''>8</div>10<divclass=''item''>9</div>11</div>1.container{2display:grid;3grid-template-columns:100px100px100px;4}5.item{6border:1pxsolidred;7}
通过上面的样式设置，可以将grid容器设置成为三列，并将每一列的宽度设置为100px 。
除了设置制定尺寸的像素，还可以通过fr单位设置列宽度的比例。修改上面的grid容器样式如下所示
1.container{2display:grid;3grid-template-columns:1fr1fr2fr;4}
可以看到整个gird容器的列被4等分，其中第一列和第二列占1份（1fr），第三列占2份（2fr）。
gird-template-rows属性可以设置gird容器中的项目有多少行，并指定行的宽度，实例代码如下所示：
.container{display:grid;grid-template-columns:100px100px100px;grid-template-rows:100px100px100px;}
通过上面的样式，可以将grid容器设置成为一个三行三列的布局，并且每一个单元格都为100px 。
grid-column-gap属性与grid-row-gap属性
grid-column-gap属性与grid-row-gap属性可以为grid容器的航宇列之间设置间距，示例代码如下所示：
1.container{2display:grid;3grid-template-columns:100px100px100px;4grid-template-rows:100px100px100px;5grid-row-gap:20px;6grid-column-gap:30px;7}
通过上面的样式，可以将行（row）之间的间距设置为20像素，将列（column）之间的间距设置为30像素。
justify-items属性与align-items属性
justify-items属性与align-items属性可以设置单元的水平位置和垂直位置，实例代码如下所示：
.container{display:grid;grid-template-columns:100px100px100px;grid-template-rows:100px100px100px;/*在单元格内水平居中*/justify-items:center;/*在单元格内存执居中*/align-items:center;}
默认的情况下， grid容器单元格内的块元素会适应单元的的宽度和高度，设置justify-items后，单元格内的元素会适应自身内容的宽度，设置align-items后，单元格内的元素会使用内容的高度。

学习猿地|第2章 网页重构16 grid布局，【融职培训】Web前端学习

学习猿地|第2章网页重构16 grid布局，【融职培训】Web前端学习