全新的css網站佈局--Grid佈局

Grid佈局全新的css網站佈局

CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。下面是一個 wrapper 元素，內部包含6個 items ：

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

 

要把 wrapper 元素變成一個grid(網格)，只要簡單地把其 display 屬性設置爲grid便可：

.wrapper{
    display:grid;
}

 

爲了使其成爲二維的網格容器，咱們須要定義列和行。讓咱們建立3列和2行。咱們將使用grid-template-row和grid-template-column屬性。

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

 

正如你所看到的，咱們爲grid-template-columns寫入了 3 個值，這樣咱們就會獲得 3 列。 咱們想要獲得 2 行，所以咱們爲 grid-template-rows指定了2個值。

這些值決定了咱們但願咱們的列有多寬（ 100px ），以及咱們但願行數是多高（ 50px ）,結果以下：

接下來是如何在 grid(網格) 上放置 items(子元素) 。特別注意，這裏纔是體現 Grid 佈局超能力的地方，由於它使得建立佈局變得很是簡單。

 

咱們使用與以前相同的 HTML 標記，爲了幫助咱們更好的理解，咱們在每一個 items(子元素) 加上了單獨的 class ：

 

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

 

如今，咱們來建立一個 3×3 的 grid(網格)：

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

 

將獲得如下佈局：

不知道你發現沒有，咱們只在頁面上看到 3×2 的 grid(網格)，而咱們定義的是 3×3 的 grid(網格)。

 

這是由於咱們只有 6 個 items(子元素) 來填滿這個網格。若是咱們再加3個 items(子元素)，那麼最後一行也會被填滿。

 

要定位和調整 items(子元素) 大小，咱們將使用grid-column和 grid-row屬性來設置：

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

 

咱們在這裏要作的是，咱們但願 item1 佔據從第一條網格線開始，到第四條網格線結束。換句話說，它將獨立佔據整行。 如下是在屏幕上顯示的內容：

 

 若是你不明白咱們設置的只有 3 列，爲何有4條網格線呢？看看下面這個圖像，我畫了黑色的列網格線： 

請注意，咱們如今正在使用網格中的全部行。當咱們把第一個 items(子元素) 佔據整個第一行時，它把剩下的 items(子元素) 都推到了下一行。

 

最後，給你一個更簡單的縮寫方法來編寫上面的語法：

 

.item1 {
    grid-column: 1 / 4;
}

 

爲了確保你已經正確理解了這個概念，咱們從新排列其餘的 items(子元素) 。

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

 

如下是頁面上的佈局效果：