CSSGrid網(wǎng)格布局-創(chuàng)新互聯(lián)

網(wǎng)格

網(wǎng)格是一個成熟的設計工具，許多現(xiàn)代網(wǎng)站布局是基于規(guī)則網(wǎng)格。在本文中，我們將看看基于網(wǎng)格的設計，以及如何使用CSS來創(chuàng)建網(wǎng)格——兩者都通過現(xiàn)在的工具，和剛剛開始在瀏覽器中可用的新技術。

創(chuàng)新互聯(lián)建站專注于溫泉網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供溫泉營銷型網(wǎng)站建設，溫泉網(wǎng)站制作、溫泉網(wǎng)頁設計、溫泉網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務，打造溫泉網(wǎng)絡公司原創(chuàng)品牌,更為您提供溫泉網(wǎng)站排名全網(wǎng)營銷落地服務。

什么是網(wǎng)格布局？

網(wǎng)格僅僅是由水平和垂直線集合創(chuàng)建的一個模式，我們可以根據(jù)這個模式排列我們的設計元素。它們幫助我們創(chuàng)建設計——在頁面之間移動時元素不會跳動或更改寬度，從而在我們的網(wǎng)站上提供高一致性。
網(wǎng)格通常具有列（column），行（row），以及在每行和列之間的間隙——通常稱為溝槽（gutter）。

定義一個網(wǎng)格

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

讓我們創(chuàng)建創(chuàng)建一個 3×3 的布局

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。

fr 單位(等分)

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

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

就是說，我們將有 2 行：第一排占據(jù)垂直空間的 2/5 。 第二排占垂直空間的 3/5 。
我們使用 fr 代替 px

.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);
    }

示例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)格項

假設我想將第 6 個框移到第 2 個框的位置。沒有CSS網(wǎng)格，不改變 HTML 的情況下，這幾乎是一個不可能的任務，至少對我而言。但是如果我們使用網(wǎng)格模塊，改變網(wǎng)格中網(wǎng)格項的位置是一件輕而易舉的事情。要將第6個框移到第2個框的位置，我們必須確切知道第2個框在哪里。通過網(wǎng)格線編號的幫助，我們可以很容易地找到這個位置。第二個方框位于第2條列網(wǎng)格線之后，第3條列網(wǎng)格線之前，第1條行網(wǎng)格線之下，第2條行網(wǎng)格線之上?，F(xiàn)在我們可以使用以下屬性將這些網(wǎng)格線編號分配到第6個框中：

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

前兩個屬性對應于垂直網(wǎng)格線，也就是列網(wǎng)格線的開始和結束。 最后兩個屬性是指水平網(wǎng)格線，也就是行網(wǎng)格線的開始和結束。 讓我們分配正確的網(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)格線和結束網(wǎng)格線設置在一起。

.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;
    }

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

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

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

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

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

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

例子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;
}

效果如下：

此外，我們還可以把flex(彈性盒子)與grid聯(lián)合起來用，在此不多說

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：CSSGrid網(wǎng)格布局-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article34/dchese.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、網(wǎng)站設計公司、營銷型網(wǎng)站建設、外貿(mào)網(wǎng)站建設、搜索引擎優(yōu)化、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)