如何使用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖

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

先上效果圖：

第一個(gè)簡單版本

第一眼看上去可能會(huì)有點(diǎn)不知道怎么開始，因此我們先來關(guān)注如何創(chuàng)建一個(gè)簡單的版本。首先，我們需要為圖表編寫 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)簽將對(duì)應(yīng)柱狀圖中的一條柱子，整篇文章所需要的 HTML 就這么多。

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

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

* {
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

理解網(wǎng)格線

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

這四行四列的對(duì)應(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 行）。如果我們想讓那個(gè)黑盒子填滿所有 4 行，那么我們需要在第 5 條網(wǎng)格線結(jié)束，即：1 / 5。理解這一點(diǎn)很重要。

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

回到示例

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

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

理解了網(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;
}

效果：

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!