《Web前端開發(fā)項(xiàng)目教程》網(wǎng)頁的藍(lán)圖-復(fù)雜布局-網(wǎng)格布局網(wǎng)上商城首頁

項(xiàng)目03網(wǎng)站首頁布局任務(wù)3-3網(wǎng)格布局網(wǎng)上商城首頁任務(wù)3-3網(wǎng)格布局網(wǎng)站商城首頁

知識(shí)點(diǎn)理解網(wǎng)格布局掌握網(wǎng)格容器的設(shè)置及其屬性掌握子元素的屬性技能點(diǎn)學(xué)會(huì)使用CSSGrid網(wǎng)格進(jìn)行靈活的頁面布局一、認(rèn)識(shí)CSSGrid網(wǎng)格布局網(wǎng)格布局是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng)，由縱橫相交的兩組網(wǎng)格線形成的框架性結(jié)構(gòu)。網(wǎng)頁設(shè)計(jì)者可以利用這些由行（row）和列（column）形成的框架結(jié)構(gòu)來布局設(shè)計(jì)元素。一、認(rèn)識(shí)CSSGrid網(wǎng)格布局我們可以假想一個(gè)容器，里面有若干子元素，子元素按照網(wǎng)格的形式排列，網(wǎng)格線就是構(gòu)成網(wǎng)格所有的線條。一個(gè)兩行五列的布局，就會(huì)有3條行網(wǎng)格線，6條列網(wǎng)格線，網(wǎng)格線編號(hào)遵循從左到右、從上到下，由1號(hào)開始開始，n行有n+1根水平網(wǎng)格線，m列有m+1根垂直網(wǎng)格線。相鄰兩條平行的網(wǎng)格線之間所形成的區(qū)域用來擺放子元素，子元素之間可以有間距。二、網(wǎng)格布局中對(duì)父元素的操作---設(shè)置網(wǎng)格容器方法：在元素上聲明display:grid，這樣就能觸發(fā)渲染引擎的網(wǎng)格布局算法，創(chuàng)建一個(gè)網(wǎng)格容器，這個(gè)元素的所有直系子元素都會(huì)自動(dòng)成為網(wǎng)格元素。<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;}二、網(wǎng)格布局中對(duì)父元素的操作---劃分網(wǎng)格線網(wǎng)格線是構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線，它們既可以是垂直的（列網(wǎng)格線），也可以是水平的（行網(wǎng)格線），這些線條構(gòu)成了布局的基礎(chǔ)模板，任意兩條線之間的空間就是一個(gè)網(wǎng)格軌道。在畫線過程中，需要根據(jù)行和列兩個(gè)維度分別進(jìn)行設(shè)置，由行線和列線所分隔出來的區(qū)域用來擺放子元素。.container{ display:grid; grid-template-columns:300px300px300px; grid-template-rows:120px120px120px;}（1）grid-template-columnsgrid-template-columns屬性用于定義列軌道的大小，即列的寬度。取值的方式可以是百分比或者具體值，給幾個(gè)值就會(huì)設(shè)置幾列，若設(shè)置的值之和超出父容器的寬度就會(huì)出現(xiàn)滾動(dòng)條。grid-template-columns:100px20%1em;grid-template-columns:repeat(3,20%);grid-template-columns:100px1fr2frrepeat(2,20%);等分3份單位fr是單詞fraction的縮寫，fr用于等分剩余空間，它會(huì)自動(dòng)計(jì)算除了網(wǎng)格間距之外其余的部分。5列布局，其中的1fr表示寬度為總寬度減去左邊的100px和右側(cè)兩列的20%之后剩余部分的1/3，第3列的寬度是將會(huì)是第2列的兩倍。（1）grid-template-columns.container{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:120px120px120px;}（2）grid-template-rowsgrid-template-rows屬性用于設(shè)置行軌道的大小，即行高，給幾個(gè)值就會(huì)設(shè)置幾行。屬性值和grid-template-columns的屬性值完全一樣。

（3）grid-template有時(shí)我們也會(huì)將grid-template-rows和grid-template-columns縮寫為grid-template，屬性值的寫法為行數(shù)/列數(shù)的形式。grid-template:1fr50px/1fr4fr;表示兩行兩列的布局，第一行的高度為該容器的總高度減去第二行的50px之后剩下的高度，總寬度分成5等份，第一列的寬度占1份，第二列占4份。（4）grid-auto-rows和minmax()可以使用grid-auto-rows屬性配合minmax()函數(shù)對(duì)行的高度進(jìn)行更好的設(shè)置。假設(shè)在需求中有一個(gè)最小行高的需求，例如：如果內(nèi)容少，行高為40px，如果內(nèi)容多，行高要跟隨響應(yīng)的內(nèi)容變大，那么minmax可以寫為minmax(40px,auto)，auto就意味著行高將會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整，但是最小也是40px。前提是沒有對(duì)子元素單獨(dú)設(shè)置固定的高度。

二、網(wǎng)格布局中對(duì)父元素的操作---添加網(wǎng)格間距網(wǎng)格間距的設(shè)置在實(shí)際開發(fā)中是可選的，主要根據(jù)網(wǎng)頁設(shè)計(jì)的需求而定。在兩個(gè)網(wǎng)格單元之間的網(wǎng)格橫向間距或網(wǎng)格縱向間距可使用grid-column-gap和grid-row-gap屬性來創(chuàng)建，或者直接使用兩個(gè)合并的縮寫形式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;}或二、網(wǎng)格布局中對(duì)父元素的操作---設(shè)置子元素對(duì)齊對(duì)齊是布局過程中一個(gè)不可缺少的步驟，網(wǎng)格布局包含多個(gè)網(wǎng)格子元素，每個(gè)子元素相對(duì)網(wǎng)格區(qū)域的對(duì)齊分為行和列兩個(gè)維度，分別通過網(wǎng)格容器上的align-items和justify-items兩個(gè)屬性進(jìn)行設(shè)置。.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; }三、網(wǎng)格布局中對(duì)子元素的操作--子元素的對(duì)齊操作對(duì)父元素設(shè)置了align-items和justify-items屬性，就相當(dāng)于為網(wǎng)格的所有子項(xiàng)目都統(tǒng)一設(shè)置了對(duì)齊屬性，如需單獨(dú)調(diào)整還可以為單獨(dú)的某一個(gè)網(wǎng)格元素設(shè)置個(gè)性化的align-self和justify-self屬性。針對(duì)個(gè)別子元素的對(duì)齊處理，仍然按照行列兩組屬性進(jìn)行分別處理/*列軸對(duì)齊*/.item:nth-child(1){align-self:end;}/*行軸對(duì)齊*/.item:nth-child(2){justify-self:end;}:nth-child(n)為偽類選擇器，匹配父元素中的第n個(gè)子元素.item:nth-child(2)指定每個(gè).item元素匹配的父元素中第2個(gè)子元素。三、網(wǎng)格布局中對(duì)子元素的操作--子元素跨行跨列有的子元素需要占據(jù)多個(gè)網(wǎng)格單元，要確定具體占位，可以利用之前在父容器中所指定的網(wǎng)格線編號(hào)來定位，樣式屬性：①grid-column-start：規(guī)定從哪一列開始顯示項(xiàng)目。②grid-column-end：規(guī)定在哪一條列線上停止顯示項(xiàng)目，或跨越多少列。③grid-row-start：規(guī)定從哪行開始顯示項(xiàng)目。④grid-row-end：規(guī)定在哪條行線上停止顯示項(xiàng)目，或者橫跨多少行。通過設(shè)置起始行、結(jié)束行和起始列、結(jié)束列來給子元素劃定它所要擺放的區(qū)域。.it