欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS Grid布局教程之網(wǎng)格單元格布局

  發(fā)布時(shí)間：2014-12-30 16:08:21   作者：佚名   我要評(píng)論
本文通過(guò)各種實(shí)例向大家闡述CSS Grid布局，讓我們一起領(lǐng)略其強(qiáng)大的魅力,需要的朋友可以參考下

CSS Grid布局對(duì)于我等來(lái)說(shuō)就是一個(gè)全新的布局，但國(guó)外很多同行朋友已對(duì)這種布局做了全面的探知。前面花了兩篇內(nèi)容（《CSS Grid布局教程之什么是網(wǎng)格布局》和《CSS Grid布局教程之瀏覽器開(kāi)啟CSS Grid Layout匯總》）為這篇文章做足了鋪墊?；蛟S你想知道的是如何使用？各位看官不用太急，接下來(lái)通過(guò)各種實(shí)例向大家闡述CSS Grid布局，讓我們一起領(lǐng)略其強(qiáng)大的魅力。

當(dāng)然，接下來(lái)的示例不是我想出來(lái)的，這是我挖出來(lái)的，主要制作者是Rachel Andrew。在繼續(xù)往下閱讀之前，我們應(yīng)該一起感謝Rachel Andrew，感謝他給我們提供這么多有關(guān)于CSS Grid Layout的示例。同時(shí)如果你想在你的瀏覽器中能正常的演示接下的有關(guān)于CSS Grid Layout的示例，你得先保證你已閱讀了《CSS Grid布局教程之瀏覽器開(kāi)啟CSS Grid Layout匯總》一文，并且按照文章中的方法進(jìn)行過(guò)設(shè)置。如果沒(méi)有話，或許你將看不到下面示例的效果。咱也不糾結(jié)了，開(kāi)始實(shí)戰(zhàn)吧。

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

可以給父容器的display屬性設(shè)置為grid或者inline-grid來(lái)定義一個(gè)網(wǎng)格。這樣你就可以使用grid-template-columns和grid-template-rows屬性來(lái)創(chuàng)建一個(gè)網(wǎng)格。

在這個(gè)示例中，創(chuàng)建了一個(gè)三列網(wǎng)格，其中三個(gè)列的列寬是100px，并且指定列與列之間的間距為10px。同時(shí)網(wǎng)格具有三行，每行的高度是自動(dòng)的，另外行與行之間的間距是10px。簡(jiǎn)單點(diǎn)說(shuō)就是一個(gè)三行三列的網(wǎng)格，并且列與列之間，行與行之間的間距都是10px。

此時(shí)瀏覽器將容器中的子元素自動(dòng)填入到每個(gè)網(wǎng)格單元格中，當(dāng)超過(guò)指定的列數(shù)時(shí)，網(wǎng)格會(huì)自動(dòng)換行，如下圖所示：

看看代碼是怎么完成的：

HTML


復(fù)制代碼
代碼如下:
<font face="Courier New"><font face="Arial">
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div></font>
</font>

CSS


復(fù)制代碼
代碼如下:

body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
}
.b,.d,.g,.i {
background-color:red;
}

定義網(wǎng)格的關(guān)鍵代碼：


復(fù)制代碼
代碼如下:

.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}

在線案例

從示例效果中可以看出，.wrapper容器通過(guò)display:grid;定義成網(wǎng)格，并且使用grid-template-columns:100px 10px 100px 10px 100px;和grid-template-rows:auto 10px auto;指定了列寬、列間距，行高和行間距等。對(duì)應(yīng)的子元素.a、.c、.e、.f、.h和.j列寬度為100px(也就是黑色區(qū)域),而.b、.d、.g和.i是列與列的間距10px(也就是紅色區(qū)域)。而且當(dāng)子元素在一行填不下時(shí)，就會(huì)自動(dòng)換行，如.f～.j自動(dòng)換到第二行顯示。

基于網(wǎng)格線的占位區(qū)

網(wǎng)格中的單元格是有網(wǎng)格線劃分出來(lái)的，那么在網(wǎng)格布局中，同樣可以使用網(wǎng)格線來(lái)給子元素設(shè)置占位區(qū)域?；谏侠谌萜?code>.wrapper下面有十個(gè)子元素.a~.j，接下來(lái)看如何通過(guò)基于網(wǎng)格線來(lái)實(shí)現(xiàn)各種在網(wǎng)格布局中的區(qū)域。

對(duì)于網(wǎng)格線，在網(wǎng)格布局中有兩種，一種是列線,另一種是行線。對(duì)應(yīng)的個(gè)網(wǎng)格單元格都有列線起始線（grid-column-start）、列線終止線(grid-column-end)和行線起始線（grid-row-start）、行線終止線（grid-row-end）。

如上圖所示，紫色的是列網(wǎng)格線，而藍(lán)色的是行網(wǎng)格線，其中高亮大紅的那個(gè)單元格列起始線是line3，列終止線是line4，行起始線是line3，行終止線是line4。也就是說(shuō)這四條網(wǎng)格線間的區(qū)域是一個(gè)單元格。

接下來(lái)，看一個(gè)示例，如何用網(wǎng)格線實(shí)現(xiàn)單元格占位區(qū)域：

HTML


復(fù)制代碼
代碼如下:

<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div>

CSS


復(fù)制代碼
代碼如下:

body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
.d {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 1;
grid-row-end: 2;
}
.e {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.f {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.g {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
.h {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 3;
grid-row-end: 4;
}
.i {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
}
.j {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
}

在線案例

這種方式可以讓你的子元素.a~.b定位在任何位置，比如說(shuō)，你現(xiàn)在想要.a和.f對(duì)換，那么很簡(jiǎn)單就能實(shí)現(xiàn)：


復(fù)制代碼
代碼如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background:red;
}
.f {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background:orange;
}</font>
</font>

運(yùn)行的效果如下：

在線案例

網(wǎng)格線簡(jiǎn)寫(xiě)

前面兩個(gè)示例向大家演示了如何用網(wǎng)格線實(shí)現(xiàn)布局，可以說(shuō)是簡(jiǎn)單方便，唯一就是寫(xiě)代碼麻煩，要什么grid-column-start、grid-column-end等等。其實(shí)有一種簡(jiǎn)寫(xiě)方式，可以讓你不再痛苦。

網(wǎng)格線的簡(jiǎn)寫(xiě)方式，其實(shí)就是grid-column和grid-row的start與end值合并在一起，兩者之間用/來(lái)分隔。比如：


復(fù)制代碼
代碼如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}</font>
</font>

可以寫(xiě)成：


復(fù)制代碼
代碼如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}</font>
</font>

這樣一來(lái)，上例的代碼，我們就可以換成簡(jiǎn)寫(xiě)方式：


復(fù)制代碼
代碼如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 7 / 8;
grid-row: 1 / 2;
}
.e {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.f {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.g {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
.h {
grid-column: 7 / 8;
grid-row: 3 / 4;
}
.i {
grid-column: 1 / 2;
grid-row: 5 / 6;
}
.j {
grid-column: 3 / 4;
grid-row: 5 / 6;
}</font>
</font>

效果依舊：

在線案例

網(wǎng)格區(qū)域?qū)崿F(xiàn)元素占位區(qū)

在CSS Grid Layout中有一個(gè)關(guān)鍵東東，網(wǎng)格區(qū)域grid-area。網(wǎng)格區(qū)域他是由四條網(wǎng)格線組成的一個(gè)空間，簡(jiǎn)單點(diǎn)說(shuō)，一個(gè)網(wǎng)格單元格也是一個(gè)網(wǎng)格區(qū)域（因?yàn)樗彩怯兴臈l網(wǎng)格線組成的一個(gè)空間），多個(gè)單元格合并在一起也是一個(gè)網(wǎng)格區(qū)域。這樣一來(lái)，要實(shí)現(xiàn)上例的效果，還可以使用網(wǎng)格區(qū)域grid-area來(lái)完成。

在具體做案例之前，先簡(jiǎn)單的了解，網(wǎng)格區(qū)域是由哪幾條網(wǎng)格線組成。組成網(wǎng)格區(qū)域的網(wǎng)格線順序是row-start/column-start/row-end/column-end。每個(gè)網(wǎng)格線之間也是使用/來(lái)分隔。

接下來(lái)將上例使用網(wǎng)格區(qū)域改造一下，改造之后的樣式代碼如下：


復(fù)制代碼
代碼如下:
<font face="Courier New">
<font face="Arial">.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.a{
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 3 / 2 /4;
}
.c {
grid-area: 1 / 5 / 2 / 6;
}
.d {
grid-area: 1 / 7 / 2 / 8;
}
.e {
grid-area: 3 / 1 / 4 / 2;
}
.f {
grid-area: 3 / 3 / 4 / 4;
}
.g {
grid-area: 3 / 5 / 4 / 6;
}
.h {
grid-area: 3 / 7 / 4 / 8;
}
.i {
grid-area: 5 / 1 / 6 / 2;
}
.j {
grid-area: 5 / 3 / 6 / 4;
}</font>
</font>

效果如下：

在線案例

是不是讓你的世界變得更簡(jiǎn)單了。

總結(jié)

在這篇文章中主要通過(guò)幾個(gè)簡(jiǎn)單的實(shí)例向大家演示了如何使用定義網(wǎng)格，又是如何使用網(wǎng)格線實(shí)現(xiàn)單元格布局，可以說(shuō)這樣的布局弱爆了，和表格的單元格沒(méi)有什么不一樣嘛，但現(xiàn)實(shí)是殘酷的，我們的布局是星羅萬(wàn)像，沒(méi)有這么簡(jiǎn)單。不是說(shuō)CSS Grid Layout很強(qiáng)大嘛，那又要如何實(shí)現(xiàn)一些復(fù)雜的布局呢？敬請(qǐng)觀注下章分解，向大家闡述如何實(shí)現(xiàn)單元格合并效果。

相關(guān)文章

最新評(píng)論