您好,登錄后才能下訂單哦!
這篇文章主要介紹CSS中Grid網(wǎng)格布局的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
介紹
CSS Grid(網(wǎng)格) 布局使我們能夠比以往任何時候都可以更靈活構(gòu)建和控制自定義網(wǎng)格。 Grid(網(wǎng)格) 布局使我們能夠?qū)⒕W(wǎng)頁分成具有簡單屬性的行和列。它還能使我們在不改變?nèi)魏蜨TML的情況下,使用 CSS 來定位和調(diào)整網(wǎng)格內(nèi)的每個元素。它允許 HTML 純粹作為內(nèi)容的容器。HTML 結(jié)構(gòu)不再受限于樣式表現(xiàn),比如不要為了實現(xiàn)某種布局而多次嵌套,現(xiàn)在這些都可以讓 CSS 來完成。
定義一個網(wǎng)格
Grid(網(wǎng)格) 模塊為 display
屬性提供了一個新的值: grid
。當你將任何元素的 display
屬性設(shè)置為 grid
時,那么這個元素就是一個 網(wǎng)格容器(grid container),它的所有直接子元素就成了 網(wǎng)格項(grid items)。
讓我們創(chuàng)建創(chuàng)建一個 3×3 的布局,做一個 Tic-Tac-Toe (井字游戲) 棋盤。
首先,我們將寫一些 HTML:
<div class="game-board"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
如您所見, .game-board
div 是網(wǎng)格容器,而 .box
div 是網(wǎng)格項?,F(xiàn)在我們將通過 Grid 布局來實現(xiàn) 3×3 布局。
.game-board { display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 200px 200px 200px; }
在這里,我還使用了其他兩個屬性。
grid-template-rows
屬性允許我們指定網(wǎng)格中的行數(shù)及行的高度。那么你應(yīng)該猜到另一個屬性是干什么的了。
grid-template-columns
屬性允許我們指定網(wǎng)格中的列數(shù)及列的寬度。您可以指定任何單位的尺寸大小,包括像素,百分比和其他單位 fr
,我們將在下一步學習。
fr 單位(等分)
fr
是為網(wǎng)格布局定義的一個新單位。它可以幫助你擺脫計算百分比,并將可用空間等分。
例如,如果在網(wǎng)格容器中設(shè)置這個規(guī)則: grid-template-rows: 2fr 3fr
, 那么你的網(wǎng)格容器將首先被分成 2 行。然后將數(shù)字部分加在一起,這里總和為 5, 即 5 等分。
就是說,我們將有 2 行:第一排占據(jù)垂直空間的 2/5 。 第二排占垂直空間的 3/5 。
回到我們的 Tic-Tac-Toe 例子,我們使用 fr
代替 px
。我們想要的是,應(yīng)該有3行3列。所以,我們只需要用 3 個 1fr
替換 3 個 200px
即可:
.game-board { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; }
這里特別需要注意的是: fr
單位是等分可用空間,或者說剩余空間??磦€例子
.game-board { grid-gap:2px; display: grid; width:300px; height:200px; grid-template-rows: 100px 1fr 1fr; grid-template-columns: 1fr 50px 1fr; }
布局效果如圖:
你會看到 fr
單位是將 總的尺寸 減去 單元格明確尺寸后,在等分剩余空間。 grid-gap
是間隔。
repeat() 函數(shù)
在某些情況下,我們可能有很多的列和行。在 grid-template
屬性中指定每一個值可能會很乏味。幸運的是,有一個 repeat
函數(shù) ,就像任何一個循環(huán)重復多少次輸出某個給定值。它有兩個參數(shù)。第一個是迭代次數(shù),第二個是要重復的值。我們用 repeat
函數(shù)重寫上面的例子。
.game-board { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); }
等價于:
.game-board { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; }
grid-template 屬性
grid-template
屬性是 grid-template-rows
和 grid-template-columns
的簡寫語法。 這是它的語法:grid-template: rows/columns;
我們上面的例子使用這個簡寫語法后,看起來非常整齊。
.game-board { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
看,只需使用 2 行代碼,就可以使用網(wǎng)格布局創(chuàng)建 3×3 網(wǎng)格。
例子:
HTML
<div class="game-board"> <div class="box">X</div> <div class="box">O</div> <div class="box">O</div> <div class="box">O</div> <div class="box">X</div> <div class="box">O</div> <div class="box">O</div> <div class="box">X</div> <div class="box">X</div> </div>
CSS
.game-board { width: 600px; height: 600px; margin: 0 auto; background-color: #34495e; color: #fff; border: 6px solid #2c3e50; border-radius: 10px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } .box { border: 6px solid #2c3e50; border-radius: 2px; font-family: Helvetica; font-weight: bold; font-size: 4em; display: flex; justify-content: center; align-items: center; }
網(wǎng)格線編號,網(wǎng)格單元格,網(wǎng)格軌道
網(wǎng)格線是存在于列和行每一側(cè)的線。一組垂直線將空間垂直劃分成列,而另一組水平線將空間水平劃分成行。這意味著在我們之前的例子中,有四條垂直線和四條水平線包含它們之間的行和列。
在將網(wǎng)格項從一個位置跨越到另一個位置時,網(wǎng)格線變得非常有用。
網(wǎng)格軌道是兩條線之間的空間。 網(wǎng)格軌道可以是一行或一列。
網(wǎng)格單元格很像表格單元,是兩條相鄰垂直線和兩條相鄰水平線之間的空間。 這是網(wǎng)格中最小的單位。
定位網(wǎng)格項
我采取了前面的例子的網(wǎng)格,并用數(shù)字從1到9標記每個單元格,而不是X或O,下面是它的樣子:
假設(shè)我想將第 6 個框移到第 2 個框的位置。沒有CSS網(wǎng)格,不改變 HTML 的情況下,這幾乎是一個不可能的任務(wù),至少對我而言。但是如果我們使用網(wǎng)格模塊,改變網(wǎng)格中網(wǎng)格項的位置是一件輕而易舉的事情。要將第6個框移到第2個框的位置,我們必須確切知道第2個框在哪里。通過網(wǎng)格線編號的幫助,我們可以很容易地找到這個位置。第二個方框位于第2條列網(wǎng)格線之后,第3條列網(wǎng)格線之前,第1條行網(wǎng)格線之下,第2條行網(wǎng)格線之上。現(xiàn)在我們可以使用以下屬性將這些網(wǎng)格線編號分配到第6個框中:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
前兩個屬性對應(yīng)于垂直網(wǎng)格線,也就是列網(wǎng)格線的開始和結(jié)束。 最后兩個屬性是指水平網(wǎng)格線,也就是行網(wǎng)格線的開始和結(jié)束。 讓我們分配正確的網(wǎng)格線編號來移動第 6 個框。
.box:nth-child(6) { grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 3; }
還有兩個簡寫屬性用于將行和列的開始網(wǎng)格線和結(jié)束網(wǎng)格線設(shè)置在一起。
.box:nth-child(6) { grid-row: 1 / 2; grid-column: 2 / 3; }
此外,還有一個 grid-area
屬性是所有四個上述屬性的簡寫屬性。 它按以下順序取值:grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
現(xiàn)在我們的例子可以寫成這樣
.box:nth-child(6) { grid-area: 1 / 2 / 2 / 3; }
上面的代碼行也可以進一步減少。正如您所看到的,這個框只占用一行和一個列,所以我們只需要指定行和列的起始線,而無需結(jié)束線的值
.box:nth-child(6) { grid-area: 1 / 2; }
如果我們想要第6個框跨越兩個框的區(qū)域呢? 這很容易通過將 column-end
值加 1 的辦法來完成。
.box:nth-child(6) { grid-area: 1 / 2 / 2 / 4; }
您也可以使用 span
關(guān)鍵字和占據(jù)的 軌道數(shù)量,來代替指定 grid-row-end
和 grid-column-end
的結(jié)束網(wǎng)格線編號。 在這種情況下,第6個框是跨越 2 列和 1 行。
.box:nth-child(6) { grid-area: 1 / 2 / 2 / span 2; }
網(wǎng)格區(qū)域命名
grid-area
屬性也可以用來命名網(wǎng)格的某一個部分,然后我們可以用 grid-template-areas
屬性來定位。讓我們創(chuàng)建一個簡單的 bread-and-butter 布局,頂部有一個 top, nav,中間有 main 和 aside,下面是 footer。這是所需的HTML:
<div class="container"> <header></header> <nav></nav> <main></main> <aside></aside> <footer></footer> </div>
我們需要使用 grid-area
屬性來命名每個區(qū)域:
header { grid-area: header; background-color: #9b59b6; } nav { grid-area: nav; background-color: #3498db; } main { grid-area: main; background-color: #2ecc71; } aside { grid-area: aside; background-color: #f1c40f; } footer { grid-area: footer; background-color: #1abc9c; }
現(xiàn)在我們將使用 grid-template-areas
屬性來指定每個網(wǎng)格區(qū)域所占據(jù)的行和列。 以下是我們?nèi)绾巫龅降模?/p>
.container { display: grid; grid-template-rows: 1fr 5fr 1fr; grid-template-columns: 2fr 5fr 3fr; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; grid-gap: .75em; }
請注意,header 和 footer 單詞重復三次。 這表明,header 和 footer 橫跨 3 列的寬度。 你可以把它全部寫在一行中,但是把每一行寫在一個單獨的行上很好,很干凈。 你可以看到我在這里使用了一個新的屬性 grid-gap
。 它所做的只是在兩個網(wǎng)格區(qū)域之間添加一個間距。 你也可以使用 grid-row-gap
和 grid-column-gap
來為行和列指定不同的間距值。
例子:
HTML
<div class="container"> <header></header> <nav></nav> <main></main> <aside></aside> <footer></footer> </div>
CSS
.container { display: grid; grid-template-rows: 1fr 5fr 1fr; grid-template-columns: 2fr 5fr 3fr; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; grid-gap: .75em; background-color: #eee; width: 100vw; height: 100vh; } header { grid-area: header; background-color: #9b59b6; } nav { grid-area: nav; background-color: #3498db; } main { grid-area: main; background-color: #2ecc71; } aside { grid-area: aside; background-color: #f1c40f; } footer { grid-area: footer; background-color: #1abc9c; }
以上是“CSS中Grid網(wǎng)格布局的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。