整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
css實現(xiàn)的網(wǎng)格布局
塊元素在行內(nèi)布局時，注意兩個div之間的空格。
css實現(xiàn)div寬和高相等的關(guān)鍵是使用padding-bottom這個屬性，我們設(shè)置為100%，完全撐父div。
div垂直水平居中有很多種方法，這里我采用絕對布局，然后做變換來實現(xiàn)。
css3的盒模型有兩種，一種是IE的盒模型：盒子的寬高包含邊框，填充和邊距，另一種W3C盒子模型：與IE盒模型相反。
html及css代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css寬高相等</title>
<style>
.menu-cells-wrap {
border: 5px solid green;
padding: 2px;
width: 600px;
box-sizing: content-box;
}
.menu-cell {
width: 25%;
display: inline-block;
position: relative;
box-sizing: border-box;
background: white;
}
.menu-cell>div {
box-sizing: border-box;
position: absolute;
padding: 2px;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.menu-cell:before {
content: "";
display: inline-block;
padding-bottom: 100%;
width: .1px;
vertical-align: middle;
}
.content-wrap {
position: relative;
width: 100%;
height: 100%;
box-sizing: content-box;
background: orange;
}
.content-wrap:active {
background: lightblue;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="menu-cells-wrap">
<div class="menu-cell">
<div><div class="content-wrap">
<div class="content">查詢房間</div>
</div></div>
</div><!-- 去掉兩個div之間的空格
--><div class="menu-cell">
<div><div class="content-wrap">
<div class="content">好友房間</div>
</div></div>
</div><!--
--><div class="menu-cell">
<div><div class="content-wrap">
<div class="content">房間信息</div>
</div></div>
</div><!--
--><div class="menu-cell">
<div><div class="content-wrap">
<div class="content">求和</div>
</div></div>
</div><!--
--><div class="menu-cell">
<div><div class="content-wrap">
<div class="content">認輸</div>
</div></div>
</div><!--
--><div class="menu-cell">
<div><div class="content-wrap">
<div class="content">聊天</div>
</div></div>
</div><!--
--><div class="menu-cell">
<div><div class="content-wrap">
<div class="content">游戲規(guī)則</div>
</div></div>
</div><!--
--><div class="menu-cell">
<div><div class="content-wrap">
<div class="content">登錄</div>
</div></div>
</div>
</div>
</body>
</html>
最后歡迎大家積極評論，歡迎吐槽。
文：https://scotch.io/tutorials/getting-started-with-css-grid-layout
譯文：http://www.css88.com/archives/8661
介紹
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)格項。現(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ù)及行的高度。那么你應該猜到另一個屬性是干什么的了。
grid-template-columns 屬性允許我們指定網(wǎng)格中的列數(shù)及列的寬度。您可以指定任何單位的尺寸大小，包括像素，百分比和其他單位 fr ，我們將在下一步學習。
web前端學習群：189394454，分享源碼、最新知識點、精品教程、歡迎初學者和在進階中的小伙伴。
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 。我們想要的是，應該有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: ro ws / co lu mns;
我們上面的例子使用這個簡寫語法后，看起來非常整齊。
.game-board{ display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}看，只需使用 2 行代碼，就可以使用網(wǎng)格布局創(chuàng)建 3×3 網(wǎng)格。
我們在加一些背景和間隔后，上面的例子看起來像這樣：
網(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 的情況下，這幾乎是一個不可能的任務，至少對我而言。（愚人碼頭注，如果單純這樣的效果圖，用FlexBox布局實現(xiàn)問題不大）但是如果我們使用網(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
前兩個屬性對應于垂直網(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 來為行和列指定不同的間距值。
web前端學習群：189394454，分享源碼、最新知識點、精品教程、歡迎初學者和在進階中的小伙伴。
CodePen上的這個例子：
瀏覽器支持
在寫這篇文章的時候，CSS Grid 布局很多瀏覽器已經(jīng)原生支持。根據(jù) caniuse.com 的統(tǒng)計，所有主流瀏覽器都支持CSS Grid 布局，Internet Explorer 11 部分支持 -ms- 前綴， Opera Mini 根本不支持。
結(jié)論
CSS網(wǎng)格布局允許我們更快地布局，并且更容易控制。在本教程中，我們學習了如何用CSS網(wǎng)格來定義布局， fr 單位，repeat 函數(shù)和一些網(wǎng)格系統(tǒng)中特定的術(shù)語。我們還學習了如何使用網(wǎng)格線和網(wǎng)格命名區(qū)域在網(wǎng)格容器內(nèi)定位網(wǎng)格項目。但這只是一個開始。 在下一個教程中，我們將深入到CSS網(wǎng)格。
文作為一個純CSS3實現(xiàn)網(wǎng)格的示例，在不使用table標簽，僅僅利用div標簽及flex布局，用flexbox及相關(guān)屬性來實現(xiàn)一個帶有表頭和頁眉的跨行、跨列的表格。
廢話不多講，直接上代碼：
CSS代碼如下：
HTML代碼如下：
效果圖如下：
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
