《Web前端开发项目教程》网页的蓝图-复杂布局-网格布局网上商城首页

项目03网站首页布局任务3-3网格布局网上商城首页任务3-3网格布局网站商城首页

知识点理解网格布局掌握网格容器的设置及其属性掌握子元素的属性技能点学会使用CSSGrid网格进行灵活的页面布局一、认识CSSGrid网格布局网格布局是一个二维的基于网格的布局系统，由纵横相交的两组网格线形成的框架性结构。网页设计者可以利用这些由行（row）和列（column）形成的框架结构来布局设计元素。一、认识CSSGrid网格布局我们可以假想一个容器，里面有若干子元素，子元素按照网格的形式排列，网格线就是构成网格所有的线条。一个两行五列的布局，就会有3条行网格线，6条列网格线，网格线编号遵循从左到右、从上到下，由1号开始开始，n行有n+1根水平网格线，m列有m+1根垂直网格线。相邻两条平行的网格线之间所形成的区域用来摆放子元素，子元素之间可以有间距。二、网格布局中对父元素的操作---设置网格容器方法：在元素上声明display:grid，这样就能触发渲染引擎的网格布局算法，创建一个网格容器，这个元素的所有直系子元素都会自动成为网格元素。<divclass="container"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="item">4</div><divclass="item">5</div><divclass="item">6</div><divclass="item">7</div><divclass="item">8</div><divclass="item">9</div></div>.container{display:grid;}.item{ height:100px;

background-color:rgba(0,0,255,0.4);

border:1pxsolid#000000;

box-sizing:border-box;

line-height:100px;

font-size:30px;

text-align:center;

color:white;}二、网格布局中对父元素的操作---划分网格线网格线是构成网格结构的分界线，它们既可以是垂直的（列网格线），也可以是水平的（行网格线），这些线条构成了布局的基础模板，任意两条线之间的空间就是一个网格轨道。在画线过程中，需要根据行和列两个维度分别进行设置，由行线和列线所分隔出来的区域用来摆放子元素。.container{ display:grid; grid-template-columns:300px300px300px; grid-template-rows:120px120px120px;}（1）grid-template-columnsgrid-template-columns属性用于定义列轨道的大小，即列的宽度。取值的方式可以是百分比或者具体值，给几个值就会设置几列，若设置的值之和超出父容器的宽度就会出现滚动条。grid-template-columns:100px20%1em;grid-template-columns:repeat(3,20%);grid-template-columns:100px1fr2frrepeat(2,20%);等分3份单位fr是单词fraction的缩写，fr用于等分剩余空间，它会自动计算除了网格间距之外其余的部分。5列布局，其中的1fr表示宽度为总宽度减去左边的100px和右侧两列的20%之后剩余部分的1/3，第3列的宽度是将会是第2列的两倍。（1）grid-template-columns.container{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:120px120px120px;}（2）grid-template-rowsgrid-template-rows属性用于设置行轨道的大小，即行高，给几个值就会设置几行。属性值和grid-template-columns的属性值完全一样。

（3）grid-template有时我们也会将grid-template-rows和grid-template-columns缩写为grid-template，属性值的写法为行数/列数的形式。grid-template:1fr50px/1fr4fr;表示两行两列的布局，第一行的高度为该容器的总高度减去第二行的50px之后剩下的高度，总宽度分成5等份，第一列的宽度占1份，第二列占4份。（4）grid-auto-rows和minmax()可以使用grid-auto-rows属性配合minmax()函数对行的高度进行更好的设置。假设在需求中有一个最小行高的需求，例如：如果内容少，行高为40px，如果内容多，行高要跟随响应的内容变大，那么minmax可以写为minmax(40px,auto)，auto就意味着行高将会根据内容自动调整，但是最小也是40px。前提是没有对子元素单独设置固定的高度。

二、网格布局中对父元素的操作---添加网格间距网格间距的设置在实际开发中是可选的，主要根据网页设计的需求而定。在两个网格单元之间的网格横向间距或网格纵向间距可使用grid-column-gap和grid-row-gap属性来创建，或者直接使用两个合并的缩写形式grid-gap。.container{ display:grid; grid-template-columns:repeat(3,1fr); grid-row-gap:10px; grid-column-gap:10px;}.container{ display:grid; grid-template-columns:repeat(3,1fr); grid-gap:10px10px;}或二、网格布局中对父元素的操作---设置子元素对齐对齐是布局过程中一个不可缺少的步骤，网格布局包含多个网格子元素，每个子元素相对网格区域的对齐分为行和列两个维度，分别通过网格容器上的align-items和justify-items两个属性进行设置。.container{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:180px180px180px; align-items:start|end|center|stretch;//可取其中任一值

justify-items:start|end|center|stretch;//可取其中任一值

}.item{ background-color:rgba(0,0,255,0.4); border:1pxsolid#000000; font-size:30px; line-height:100px; text-align:center; color:white; }三、网格布局中对子元素的操作--子元素的对齐操作对父元素设置了align-items和justify-items属性，就相当于为网格的所有子项目都统一设置了对齐属性，如需单独调整还可以为单独的某一个网格元素设置个性化的align-self和justify-self属性。针对个别子元素的对齐处理，仍然按照行列两组属性进行分别处理/*列轴对齐*/.item:nth-child(1){align-self:end;}/*行轴对齐*/.item:nth-child(2){justify-self:end;}:nth-child(n)为伪类选择器，匹配父元素中的第n个子元素.item:nth-child(2)指定每个.item元素匹配的父元素中第2个子元素。三、网格布局中对子元素的操作--子元素跨行跨列有的子元素需要占据多个网格单元，要确定具体占位，可以利用之前在父容器中所指定的网格线编号来定位，样式属性：①grid-column-start：规定从哪一列开始显示项目。②grid-column-end：规定在哪一条列线上停止显示项目，或跨越多少列。③grid-row-start：规定从哪行开始显示项目。④grid-row-end：规定在哪条行线上停止显示项目，或者横跨多少行。通过设置起始行、结束行和起始列、结束列来给子元素划定它所要摆放的区域。.it