這篇文章主要介紹了如何使用CSS Grid布局制作一個響應(yīng)式柱狀圖，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、六盤水ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的六盤水網(wǎng)站制作公司

先上效果圖：

第一個簡單版本

第一眼看上去可能會有點不知道怎么開始，因此我們先來關(guān)注如何創(chuàng)建一個簡單的版本。首先，我們需要為圖表編寫 HTML 標(biāo)簽：

<div class="chart">
  <div class="bar-1"></div>
  <div class="bar-2"></div>
  <div class="bar-3"></div>
  <div class="bar-4"></div>
  <!-- 一直到 bar-12 -->
</div>

這些bar- 開頭的 div 標(biāo)簽將對應(yīng)柱狀圖中的一條柱子，整篇文章所需要的 HTML 就這么多。

現(xiàn)在按照我的步驟和簡單的解說一步一步用 CSS 把柱狀圖大概的樣式畫出來，不用過多地?fù)?dān)心下面出現(xiàn)的可能對你有些陌生的 CSS 語義，稍后我們將重點介紹關(guān)于 CSS Grid 的知識。

好了，現(xiàn)在開始我們的 CSS 樣式編寫。我們先對父元素添加一些必要的樣式：

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background-color: #eee;
  display: flex;
  justify-content: center;
}

.chart {
  height: 100vh;
  width: 70vw;
}

我們需要在圖表中有 12 個條形，中間有 5px 的間距，按此需求，我們可以對父類.chart 編寫如下 Grid 相關(guān)的樣式：

.chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(100, 1fr);
  grid-column-gap: 5px;
}

對于熟悉 Grid 布局的人來說，這是非常簡單的。上面代碼表達的是：“我想要 12 列，每個子元素具有相同的寬度(1fr = 1 fraction)，高度分為 100 等分，1 等分為一行（這樣方便計算），它們之間有 5px 的間隔。”

到這里，我們的圖表仍然是空的，因為我們沒有告訴我們的子元素如何去占用網(wǎng)格中的空間。我們使用grid-row-start 和grid-row-end 屬性來填充網(wǎng)格中的垂直空間，后而我們將通過改變這兩個屬性來定義各個子元素自己的高度。為樣式類為bar 開頭子元素添加如下樣：

[class*='bar'] {
  grid-row-start: 1;
  grid-row-end: 101;
  border-radius: 5px 5px 0 0;
  background-color: #ff4136;
}

現(xiàn)在可以得到這樣的效果：

我們告訴每個柱狀圖從網(wǎng)格的頂部(1)開始，然后在底部(101)結(jié)束。上面我們把網(wǎng)格劃分了 100 行，為什么要使用 101 作為該屬性的值呢？如果你被這些 Grid 屬性搞蒙了，沒關(guān)系！在我們繼續(xù)之前，讓我們對此進行一點探討。

理解網(wǎng)格線

Grid 布局的一個特殊之處就是網(wǎng)格線的概念，這對理解這個新的布局工具非常重要。以下是網(wǎng)格線在四行四列網(wǎng)格中繪制的示意圖:

這四行四列的對應(yīng)的樣式是這樣的（特殊的黑色區(qū)域?qū)?yīng)的樣式類為special-col）：

.grid {
  grid-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.special-col {
  grid-row: 2 / 4;
  background-color: #333;
}

grid-row 是grid-row-start 和grid-row-end 的簡寫屬性，前者表示元素在網(wǎng)格中的開始位置，后者表示元素在網(wǎng)格中的結(jié)束位置。注意到?jīng)]，黑色塊是從第 2 條網(wǎng)格線開始的，并在第 4 條網(wǎng)格線結(jié)束（而不是在第 4 行）。如果我們想讓那個黑盒子填滿所有 4 行，那么我們需要在第 5 條網(wǎng)格線結(jié)束，即：1 / 5。理解這一點很重要。

換句話說，我們不應(yīng)該認(rèn)為子元素在一個網(wǎng)格中占據(jù)整個行或列，而應(yīng)該只跨越這些網(wǎng)格線的。我花了不少時間才從概念上理解并習(xí)慣了這一點，因為我最近深入研究了 Jen Simmons 關(guān)于這個問題的教程。

回到示例

這就是為什么在我們上面的圖表示例中，所有列都在 101 這個值結(jié)束，因為 101 代表的是第 101 條網(wǎng)絡(luò)線，而不是第 100 行。

現(xiàn)在，由于我們的.chart 使用了 vw/vh 單位，也就有了一個響應(yīng)良好的圖表，不需要再做其它的額外工作來支持響應(yīng)式。如果你調(diào)整瀏覽器大小，你會發(fā)現(xiàn)它可以很好地壓縮或延伸，它總是占據(jù)整個視窗。

理解了網(wǎng)絡(luò)線的概念，我們就可以很輕松地為柱子調(diào)整高度了，我們需要讓各柱子高度參差不一。

.bar-1 {
  grid-row-start: 55;
}
.bar-2 {
  grid-row-start: 1;
}
...(略);

最后我們使寄偶數(shù)的柱子顏色不一樣：

[class*='bar']:nth-child(odd) {
  background-color: #ff4136;
}

[class*='bar']:nth-child(even) {
  background-color: #0074d9;
}

效果：

我們就這樣制作完成了一個支持響應(yīng)式的柱狀圖。當(dāng)然，這個示例只是一個開始，距離要達到實際應(yīng)用的效果還有很多事情要做。比如畫標(biāo)注和軸、通過 JS 來綁定真實的業(yè)務(wù)數(shù)據(jù)等。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用CSS Grid布局制作一個響應(yīng)式柱狀圖”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文標(biāo)題：如何使用CSSGrid布局制作一個響應(yīng)式柱狀圖-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://jinyejixie.com/article40/dishho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、電子商務(wù)、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站設(shè)計公司

廣告

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