最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案。开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid。
今天和大家分享我学到的新知识:如何用 CSS Grid 布局制作一个普通的响应式柱状图。先上效果图:
这篇文章的示例只是一个试验,用来学习 CSS Grid 布局,加上本人也是现学现卖,所以本文出现的代码不具有太多的参照意义。
第一个简单版本
第一眼看上去可能会有点不知道怎么开始,因此我们先来关注如何创建一个简单的版本。首先,我们需要为图表编写 HTML 标签:
<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>
这