如何在您的網(wǎng)頁(yè)項(xiàng)目中使用便當(dāng)網(wǎng)格設(shè)計(jì)

相信我們都可能注意到了精心組織的網(wǎng)頁(yè)布局的趨勢(shì)，讓人聯(lián)想起日本便當(dāng)盒。這些“便當(dāng)網(wǎng)格”迅速贏得了關(guān)注，提供了一種視覺(jué)上吸引人且結(jié)構(gòu)緊湊的方式來(lái)在線展示內(nèi)容。

在本文中，我們將深入探討便當(dāng)網(wǎng)格趨勢(shì)的起源、崛起和實(shí)際應(yīng)用，探討它如何在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中將美學(xué)與功能相結(jié)合。

（本文內(nèi)容參考：java567.com）

文：https://scotch.io/tutorials/getting-started-with-css-grid-layout
譯文：http://www.css88.com/archives/8661

介紹

CSS Grid(網(wǎng)格) 布局使我們能夠比以往任何時(shí)候都可以更靈活構(gòu)建和控制自定義網(wǎng)格。 Grid(網(wǎng)格) 布局使我們能夠?qū)⒕W(wǎng)頁(yè)分成具有簡(jiǎn)單屬性的行和列。它還能使我們?cè)诓桓淖內(nèi)魏蜨TML的情況下，使用 CSS 來(lái)定位和調(diào)整網(wǎng)格內(nèi)的每個(gè)元素。它允許 HTML 純粹作為內(nèi)容的容器。HTML 結(jié)構(gòu)不再受限于樣式表現(xiàn)，比如不要為了實(shí)現(xiàn)某種布局而多次嵌套，現(xiàn)在這些都可以讓 CSS 來(lái)完成。

定義一個(gè)網(wǎng)格

Grid(網(wǎng)格) 模塊為 display 屬性提供了一個(gè)新的值： grid 。當(dāng)你將任何元素的 display 屬性設(shè)置為 grid 時(shí)，那么這個(gè)元素就是一個(gè) 網(wǎng)格容器(grid container)，它的所有直接子元素就成了網(wǎng)格項(xiàng)(grid items)。

讓我們創(chuàng)建創(chuàng)建一個(gè) 3×3 的布局，做一個(gè) 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>

如您所見(jiàn)， .game-board div 是網(wǎng)格容器，而 .box div 是網(wǎng)格項(xiàng)。現(xiàn)在我們將通過(guò) Grid 布局來(lái)實(shí)現(xiàn) 3×3 布局。

.game-board { display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 200px 200px 200px;
}

在這里，我還使用了其他兩個(gè)屬性。 grid-template-rows 屬性允許我們指定網(wǎng)格中的行數(shù)及行的高度。那么你應(yīng)該猜到另一個(gè)屬性是干什么的了。

grid-template-columns 屬性允許我們指定網(wǎng)格中的列數(shù)及列的寬度。您可以指定任何單位的尺寸大小，包括像素，百分比和其他單位 fr ，我們將在下一步學(xué)習(xí)。

web前端學(xué)習(xí)群：189394454，分享源碼、最新知識(shí)點(diǎn)、精品教程、歡迎初學(xué)者和在進(jìn)階中的小伙伴。

fr 單位(等分)

fr 是為網(wǎng)格布局定義的一個(gè)新單位。它可以幫助你擺脫計(jì)算百分比，并將可用空間等分。

例如，如果在網(wǎng)格容器中設(shè)置這個(gè)規(guī)則： grid-template-rows: 2fr 3fr ，那么你的網(wǎng)格容器將首先被分成 2 行。然后將數(shù)字部分加在一起，這里總和為 5，即 5 等分。

就是說(shuō)，我們將有 2 行：第一排占據(jù)垂直空間的 2/5 。第二排占垂直空間的 3/5 。

回到我們的 Tic-Tac-Toe 例子，我們使用 fr 代替 px 。我們想要的是，應(yīng)該有3行3列。所以，我們只需要用 3 個(gè) 1fr 替換 3 個(gè) 200px 即可：

.game-board { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
}

愚人碼頭注:

這里特別需要注意的是： fr 單位是等分可用空間，或者說(shuō)剩余空間。看個(gè)例子

.game-board { grid-gap:2px; display: grid; width:300px; height:200px; 
 grid-template-rows: 100px 1fr 1fr; grid-template-columns: 1fr 50px 1fr;
}

布局效果如圖：

你會(huì)看到 fr 單位是將總的尺寸減去單元格明確尺寸后，在等分剩余空間。 grid-gap 是間隔。

repeat() 函數(shù)

在某些情況下，我們可能有很多的列和行。在 grid-template 屬性中指定每一個(gè)值可能會(huì)很乏味。幸運(yùn)的是，有一個(gè) repeat 函數(shù)，就像任何一個(gè)循環(huán)重復(fù)多少次輸出某個(gè)給定值。它有兩個(gè)參數(shù)。第一個(gè)是迭代次數(shù)，第二個(gè)是要重復(fù)的值。我們用 repeat 函數(shù)重寫上面的例子。

.game-board{ display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
}

等價(jià)于：

.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 的簡(jiǎn)寫語(yǔ)法。這是它的語(yǔ)法：

grid-template: ro ws / co lu mns;

我們上面的例子使用這個(gè)簡(jiǎn)寫語(yǔ)法后，看起來(lái)非常整齊。

.game-board{ display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

看，只需使用 2 行代碼，就可以使用網(wǎng)格布局創(chuàng)建 3×3 網(wǎng)格。

我們?cè)诩右恍┍尘昂烷g隔后，上面的例子看起來(lái)像這樣：

網(wǎng)格線編號(hào),網(wǎng)格單元格，網(wǎng)格軌道

網(wǎng)格線是存在于列和行每一側(cè)的線。一組垂直線將空間垂直劃分成列，而另一組水平線將空間水平劃分成行。這意味著在我們之前的例子中，有四條垂直線和四條水平線包含它們之間的行和列。

在將網(wǎng)格項(xiàng)從一個(gè)位置跨越到另一個(gè)位置時(shí)，網(wǎng)格線變得非常有用。

網(wǎng)格軌道是兩條線之間的空間。網(wǎng)格軌道可以是一行或一列。

網(wǎng)格單元格很像表格單元，是兩條相鄰垂直線和兩條相鄰水平線之間的空間。這是網(wǎng)格中最小的單位。

定位網(wǎng)格項(xiàng)

我采取了前面的例子的網(wǎng)格，并用數(shù)字從1到9標(biāo)記每個(gè)單元格，而不是X或O，下面是它的樣子：

假設(shè)我想將第 6 個(gè)框移到第 2 個(gè)框的位置。沒(méi)有CSS網(wǎng)格，不改變 HTML 的情況下，這幾乎是一個(gè)不可能的任務(wù)，至少對(duì)我而言。（愚人碼頭注，如果單純這樣的效果圖，用FlexBox布局實(shí)現(xiàn)問(wèn)題不大）但是如果我們使用網(wǎng)格模塊，改變網(wǎng)格中網(wǎng)格項(xiàng)的位置是一件輕而易舉的事情。要將第6個(gè)框移到第2個(gè)框的位置，我們必須確切知道第2個(gè)框在哪里。通過(guò)網(wǎng)格線編號(hào)的幫助，我們可以很容易地找到這個(gè)位置。第二個(gè)方框位于第2條列網(wǎng)格線之后，第3條列網(wǎng)格線之前，第1條行網(wǎng)格線之下，第2條行網(wǎng)格線之上。現(xiàn)在我們可以使用以下屬性將這些網(wǎng)格線編號(hào)分配到第6個(gè)框中：

grid-column-start
grid-column-end
grid-row-start
grid-row-end

前兩個(gè)屬性對(duì)應(yīng)于垂直網(wǎng)格線，也就是列網(wǎng)格線的開始和結(jié)束。最后兩個(gè)屬性是指水平網(wǎng)格線，也就是行網(wǎng)格線的開始和結(jié)束。讓我們分配正確的網(wǎng)格線編號(hào)來(lái)移動(dòng)第 6 個(gè)框。

.box:nth-child(6){ grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 3;
}

還有兩個(gè)簡(jiǎn)寫屬性用于將行和列的開始網(wǎng)格線和結(jié)束網(wǎng)格線設(shè)置在一起。

.box:nth-child(6){ grid-row: 1 / 2; grid-column: 2 / 3;
}

此外，還有一個(gè) grid-area 屬性是所有四個(gè)上述屬性的簡(jiǎn)寫屬性。它按以下順序取值：

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

現(xiàn)在我們的例子可以寫成這樣

.box:nth-child(6){ grid-area: 1 / 2 / 2 / 3;
}

上面的代碼行也可以進(jìn)一步減少。正如您所看到的，這個(gè)框只占用一行和一個(gè)列，所以我們只需要指定行和列的起始線，而無(wú)需結(jié)束線的值。

.box:nth-child(6){ grid-area: 1 / 2;
}

如果我們想要第6個(gè)框跨越兩個(gè)框的區(qū)域呢？這很容易通過(guò)將 column-end 值加 1 的辦法來(lái)完成。

.box:nth-child(6){ grid-area: 1 / 2 / 2 / 4;
}

您也可以使用 span 關(guān)鍵字和占據(jù)的軌道數(shù)量，來(lái)代替指定 grid-row-end 和 grid-column-end 的結(jié)束網(wǎng)格線編號(hào)。在這種情況下，第6個(gè)框是跨越 2 列和 1 行。

.box:nth-child(6){ grid-area: 1 / 2 / 2 / span 2;
}

網(wǎng)格區(qū)域命名

grid-area 屬性也可以用來(lái)命名網(wǎng)格的某一個(gè)部分，然后我們可以用 grid-template-areas 屬性來(lái)定位。讓我們創(chuàng)建一個(gè)簡(jiǎn)單的 bread-and-butter 布局，頂部有一個(gè) top, nav，中間有 main 和 aside，下面是 footer。這是所需的HTML：

<div class="container"> <header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer></div>

我們需要使用 grid-area 屬性來(lái)命名每個(gè)區(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 屬性來(lái)指定每個(gè)網(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;
}

請(qǐng)注意，header 和 footer 單詞重復(fù)三次。這表明，header 和 footer 橫跨 3 列的寬度。你可以把它全部寫在一行中，但是把每一行寫在一個(gè)單獨(dú)的行上很好，很干凈。你可以看到我在這里使用了一個(gè)新的屬性 grid-gap 。它所做的只是在兩個(gè)網(wǎng)格區(qū)域之間添加一個(gè)間距。你也可以使用 grid-row-gap 和 grid-column-gap 來(lái)為行和列指定不同的間距值。

web前端學(xué)習(xí)群：189394454，分享源碼、最新知識(shí)點(diǎn)、精品教程、歡迎初學(xué)者和在進(jìn)階中的小伙伴。

CodePen上的這個(gè)例子：

瀏覽器支持

在寫這篇文章的時(shí)候，CSS Grid 布局很多瀏覽器已經(jīng)原生支持。根據(jù) caniuse.com 的統(tǒng)計(jì)，所有主流瀏覽器都支持CSS Grid 布局，Internet Explorer 11 部分支持 -ms- 前綴， Opera Mini 根本不支持。

結(jié)論

CSS網(wǎng)格布局允許我們更快地布局，并且更容易控制。在本教程中，我們學(xué)習(xí)了如何用CSS網(wǎng)格來(lái)定義布局， fr 單位，repeat 函數(shù)和一些網(wǎng)格系統(tǒng)中特定的術(shù)語(yǔ)。我們還學(xué)習(xí)了如何使用網(wǎng)格線和網(wǎng)格命名區(qū)域在網(wǎng)格容器內(nèi)定位網(wǎng)格項(xiàng)目。但這只是一個(gè)開始。在下一個(gè)教程中，我們將深入到CSS網(wǎng)格。

天小編為大家介紹五種css樣式布局以及內(nèi)服源代碼作為介紹，采用的方式是行內(nèi)級(jí)樣式（就是將css樣式代碼與html寫在一起）

已知布局元素的高度，寫出三欄布局，要求左欄、右欄寬度各為300px，中間自適應(yīng)。

一、浮動(dòng)布局

<!DOCTYPE html>

<html>

<head>

.wrap1 div{

min-height: 200px;

}

.wrap1 .left{

float: left;

width: 300px;

background: red;

}

.wrap1 .right{

float: right;

width: 300px;

background: blue;

}

.wrap1 .center{

background: pink;

}

</style>

</head>

<body>

浮動(dòng)布局

</div>

</body>

</html>

浮動(dòng)布局的兼容性比較好，但是浮動(dòng)帶來(lái)的影響比較多，頁(yè)面寬度不夠的時(shí)候會(huì)影響布局。

二、絕對(duì)定位布局

<!DOCTYPE html>

<html>

<head>

.wrap2 div{

position: absolute;

min-height: 200px;

}

.wrap2 .left{

left: 0;

width: 300px;

background: red;

}

.wrap2 .right{

right: 0;

width: 300px;

background: blue;

}

.wrap2 .center{

left: 300px;

right: 300px;

background: pink;

}

</style>

</head>

<body>

絕對(duì)定位布局

</div>

</div>

</body>

</html>

絕對(duì)定位布局快捷，但是有效性比較差，因?yàn)槊撾x了文檔流。

三、flex布局

<!DOCTYPE html>

<html>

<head>

<title>flex布局</title>

.wrap3{

display: flex;

min-height: 200px;

}

.wrap3 .left{

flex-basis: 300px;

background: red;

}

.wrap3 .right{

flex-basis: 300px;

background: blue;

}

.wrap3 .center{

flex: 1;

background: pink;

}

</style>

</head>

<body>

flex布局

</div>

</div>

</body>

</html>

自適應(yīng)好，高度能夠自動(dòng)撐開

四、table-cell表格布局

<!DOCTYPE html>

<html>

<head>

<title>table-cell表格布局</title>

.wrap4{

display: table;

width: 100%;

height: 200px;

}

.wrap4>div{

display: table-cell;

}

.wrap4 .left{

width: 300px;

background: red;

}

.wrap4 .right{

width: 300px;

background: blue;

}

.wrap4 .center{

background: pink;

}

</style>

</head>

<body>

表格布局

</div>

</div>

</body>

</html>

兼容性好，但是有時(shí)候不能固定高度，因?yàn)闀?huì)被內(nèi)容撐高。

五、網(wǎng)格布局

<!DOCTYPE html>

<html>

<head>

.wrap5{

display: grid;

width: 100%;

grid-template-rows: 200px;

grid-template-columns: 300px auto 300px;

}

.wrap5 .left{

background: red;

}

.wrap5 .right{

background: blue;

}

.wrap5 .center{

background: pink;

}

</style>

</head>

<body>

網(wǎng)格布局

</div>

</div>

</body>

</html>

希望大家可以一直關(guān)注我，支持我！感謝！！！

在線咨詢

上一篇：設(shè)計(jì)整理與分享一波設(shè)計(jì)資源網(wǎng)站，在線工具網(wǎng)站
下一篇：ThinkPHP之文件上傳一氣呵成就是這么暢快（RN

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

如何在您的網(wǎng)頁(yè)項(xiàng)目中使用便當(dāng)網(wǎng)格設(shè)計(jì)

您的項(xiàng)目需求