仿去哪兒城市列表搞懂grid佈局

時間  2019-11-06
標籤 哪兒 城市 列表 grid 佈局 简体版
原文   原文鏈接

本文初次發表於CSDN：網格佈局grid。爲何要將其轉到掘金？今天向一個朋友推薦掘金的文章，他問我爲何不在CSDN上進行博客發表，"那裏容易百度搜到、看到的人多......"，他居然沒聽過掘金，以後向他瘋狂推薦了一波掘金，而後記起來我也嘗試了一次CSDN使用（裏面有不少高質量文章不否定，可是本身體驗非常很差），50多個瀏覽除了這位朋友的，剩下都是我好奇想看看多少人看了個人博客而產生的，事實上並無人看。對於這一點感受掘金就好多了，無論怎樣至少會讓個人文章被其餘小夥伴看到，因此想把這篇文章轉到掘金。css

1. 前言

對於CSS的grid佈局也瞭解過一些，但一直沒怎麼用，多少有些生疏，藉着仿去哪網的城市列表頁，對這些技術進行一個綜合的學習html

注： 本文主要參考MDN的網格佈局，在目錄上可能會有極大的類似，內容上相對MDN更加通俗易懂，案例圍繞下方圖的效果進行進行設計api

參考https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
如需轉載，請註明出處瀏覽器

效果以下app

在這裏插入圖片描述
進入正題

2. grid網格佈局

2.1 網格容器

經過在元素上聲明display:grid來建立一個網格容器，這個元素的全部直系子元素都會自動成爲網格元素函數

2.2 網格軌道

行列設置

經過grid-template-columns和grid-template-rows屬性能夠在網格容器中定義網格的行和列，任意兩條線之間的空間就是一個網格軌道，例以下方圖中紅色框中爲一個行軌道，藍色框中爲一個列軌道 佈局

在這裏插入圖片描述
經過 grid-template-columns能夠定義列軌道的大小，即列的寬度

下方代碼將.wrapper設置爲網格容器，其直系子元素就變成了網格元素，經過grid-template-columns設置了三個相等的值將一行分爲三列，每一列138px，這樣網格中每一行中就有了三個網格元素學習

HTMLui

<div class="wrapper">
    <div>北京</div>
    <div>上海</div>
    <div>三亞</div>
    <div>香港</div>
    <div>杭州</div>
    <div>廣州</div>
    <div>成都</div>
    <div>深圳</div>
    <div>蘇州</div>
    <div>桂林</div>
    <div>西安</div>
    <div>廈門</div>
  </div>
複製代碼

CSSspa

.wrapper{
	display: grid;
	grid-template-columns: 138px 138px 138px;
}
複製代碼

注：對於案例中其餘樣式的CSS代碼以下，僅列出一次

.wrapper{
  width: 414px;
  background-color: #f5f5f5;
  font-size: 12px;
  margin: 0 auto;
  border: 1px solid #00bcd4;
}
.wrapper > div{
  box-sizing: border-box;
  line-height: 44px;
  border: 1px solid #00bcd4;
  border-radius: 10px;
}
複製代碼

效果

在這裏插入圖片描述

fr單位

在網格佈局中，還爲咱們提供了一個新的單位fr，這是一個相對的單位，上面的138px是咱們寫死的長度，若是網格容器的寬度是變化的，咱們就不能保證每行的3個元素恰好能夠佔滿容器

將CSS代碼改成

.wrapper{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
複製代碼

這樣表示在網格容器中有三列，每一列各佔一份

效果仍是不變的

在這裏插入圖片描述

將CSS代碼改成

.wrapper{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
}
複製代碼

這樣表示中間那一列的網格元素佔兩份，左右兩邊的網格元素佔一份

效果爲

在這裏插入圖片描述
經過 fr單位，咱們能夠很容易作到按照必定的比例去設置每一列

repeat()

網格系統還提供給咱們一個更加方便的函數 它到底有什麼用，先寫代碼來看看

.wrapper{
	display: grid;
	grid-template-columns: repeat(3,1fr);
}
複製代碼

第一個參數表示重複的次數，第二個就是份數，這個跟上面寫的grid-template-columns: 1fr 2fr 1fr;是相同的效果，這樣若是咱們有更加複雜的須要重複的佈局需求，repeat就能夠很好的幫咱們解決這種問題

固然repeat()並非只能單獨使用

.wrapper{
	display: grid;
	grid-template-columns: 1fr repeat(2,2fr) 1fr;
}
複製代碼

咱們還能夠將repeat跟正常的fr單位混這寫，固然若是用px作單位也是能夠的

repeat的第二個參數並非只能寫一個，它也是支持寫多個份數的

.wrapper{
	display: grid;
	grid-template-columns: repeat(2,1fr 2fr);
}
複製代碼

效果

在這裏插入圖片描述

隱式網格和顯式網格

咱們在上面並無定義grid-template-rows可是咱們發現咱們的網格中也出現了好幾行，這些行就是網格爲咱們隱式建立的行

在grid-template-columns和grid-template-rows明肯定義出來的列和行就是顯式的網格，若是網格元素的數量多於咱們顯式聲明的行和列劃分出來的元素數量，那個網格系統就會爲咱們建立隱式的網格

軌道大小和minmax()

能夠在grid-auto-rows屬性中使用minmax()函數對行的高度進行更好的設置

在需求中若是有一個最小行高的需求，例：若是內容少，行高爲44px，若是內容多，行高要跟隨響應的內容變大，minmax能夠寫爲minmax(44px, auto)，auto就意味着行高將會根據內容自動調整，可是最小也是44px

HTML

<div class="wrapper">
    <div>北京<p>首都</p></div>
    <div>上海</div>
    <div>三亞</div>
    <div>香港</div>
    <div>杭州</div>
    <div>廣州</div>
    <div>成都</div>
    <div>深圳</div>
    <div>蘇州</div>
    <div>桂林</div>
    <div>西安</div>
    <div>廈門</div>
  </div>
複製代碼

CSS

.wrapper{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(44px, auto);
}
複製代碼

效果

在這裏插入圖片描述

對應列也有grid-auto-columns屬性來進行相關設置

3. 網格線

在定義網格時，咱們定義而定是網格軌道，不是網格線，grid會爲咱們建立網格線並賦予編號，網格線以下所示

在這裏插入圖片描述
經過網格線咱們能夠輕鬆定位想要的網格元素，網格線的順序取決於書寫模式，從左到右的書寫語言中最左邊爲1號，從右到左書寫的語言中最右邊是1號。

跨軌道放置網格元素

在網格線的基礎上，咱們能夠經過網格線去跨軌道放置網格元素 咱們能夠在網格元素的CSS屬性中使用grid-column-start和grid-column-end來設置網格元素佔據的列數 經過grid-row-start和grid-row-end來設置網格元素佔據的行數

HTML

<div class="wrapper">
    <div class="title">熱門城市</div>
    <div class="capital">北京
      <div>首都</div>
    </div>
    <div>上海</div>
    <div>三亞</div>
    <div>香港</div>
    <div>杭州</div>
    <div>廣州</div>
    <div>成都</div>
    <div>深圳</div>
    <div>蘇州</div>
    <div>桂林</div>
    <div>西安</div>
    <div>廈門</div>
  </div>
複製代碼

CSS

.wrapper{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(44px, auto);
}
.title{
	grid-column-start: 1;
	grid-column-end: 4;
}
.capital{
	grid-row-start: 2;
	grid-row-end: 4;
}
複製代碼

效果

在這裏插入圖片描述
咱們設置 熱門城市這個網格元素的列從第1根 列網格線開始，到第4根 列網格線結束 北京 首都的行從第2根 行網格線開始，到第4根 行網格線結束，其他沒有設置的就按照默認的方式放到網格中

固然，你們能夠根據本身的喜愛，按照上述方式去隨意放置網格元素

4. 網格單元

一個網格單元是網格元素中最小的單位，相似於表格中的單元格 如上方的案例圖中一個格子就是一個網格單元

5. 網格區域

網格區域是個矩形，如上述圖中熱門城市這個網格元素，咱們雖然對他進行了擴展，可是無論怎麼擴展它都只能是一個矩形，不能擴展成L形或其餘形狀

6. 網格間距

經過網格間距以及上面提到的一些東西，咱們就能夠徹底實現要實現的內容了

網格間距定義在網格容器的CSS中，有三個屬性grid-column-gap設置列之間的間距，grid-row-gap設置行之間的間距，grid-gap同時設置行和列之間的間距

HTML代碼

<div class="wrapper">
    <div class="title">熱門城市</div>
    <div>北京</div>
    <div>上海</div>
    <div>三亞</div>
    <div>香港</div>
    <div>杭州</div>
    <div>廣州</div>
    <div>成都</div>
    <div>深圳</div>
    <div>蘇州</div>
    <div>桂林</div>
    <div>西安</div>
    <div>廈門</div>
  </div>
複製代碼

CSS代碼

.wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  /*grid-gap: 2px*/ /*這裏或者這樣寫*/
}
複製代碼

其餘的樣式代碼作了些調整，這裏也再放出來吧

.wrapper{
      width: 414px;
      background-color: #f5f5f5;
      font-size: 12px;
      margin: 0 auto;
      border: 1px solid #00bcd4;
    }
    .wrapper > div{
      box-sizing: border-box;
      line-height: 44px;
      background-color: #fff;
      text-align: center;
    }
    .wrapper>.title{
      grid-column-start: 1;
      grid-column-end: 4;
      background-color: #f5f5f5;
      text-align: left;
      text-indent: 10px;
      line-height: 36px;
    }
複製代碼

效果

在這裏插入圖片描述
這樣即可以實現相應的效果

7. 嵌套網格

嵌套網格

網格單元也能夠做爲網格容器，裏面再實現一個小的網格佈局

這裏我在外層新建了一個網格容器 HTML代碼

<div class="outWrapper">
	上述代碼複製了6份
</div>
複製代碼

CSS代碼

.outWrapper{
      background-color: #00bcd4;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-auto-columns: minmax(414px,auto)
    }
複製代碼

效果

在這裏插入圖片描述
在這裏插入圖片描述

子網格

在Level 1網格規範中有個子網格的特性，即上述代碼中咱們將outWrapper內部的子網格的display不要設置爲grid，而是設置爲display:subgrid 注

規範中雖然有子網格特性，可是子網格尚未在任何瀏覽器中實現，而且可能隨時被移除，瞭解就好

8. 使用z-index控制層級

因爲咱們能夠控制網格元素的位置，有可能就會產生覆蓋現象 HTML

<div class="wrapper">
    <div class="title">熱門城市</div>
    <div class="capital">北京
      <div>首都</div>
    </div>
    <div>上海</div>
    <div>三亞</div>
    <div>香港</div>
    <div>杭州</div>
    <div>廣州</div>
    <div>成都</div>
    <div>深圳</div>
    <div>蘇州</div>
    <div>桂林</div>
    <div>西安</div>
    <div>廈門</div>
  </div>
複製代碼

CSS

.wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}
.wrapper>.title{
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #f5f5f5;
}
.capital{
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}
複製代碼

效果

在這裏插入圖片描述

此時北京 首都網格元素覆蓋了熱門城市的部份內容

若是咱們想讓熱門城市覆蓋北京，只須要給熱門城市加上z-index屬性便可，值我這裏設置的2，就能夠覆蓋了

效果

在這裏插入圖片描述
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程