前言
柱状图是数据可视化中常用的展示方式，可以清晰直观地呈现数据分布情况，目前许多数据可视化库都有内置的柱状图组件，但在需求简单的情况下，我们也可以考虑使用 CSS Grid 实现柱图布局，无需引入其他插件库，可以更好地控制呈现效果。
CSS Grid 简介
CSS Grid 是一种基于网格布局的 CSS 属性，通过划分网格来控制元素在页面中的布局，支持灵活的列和行控制，多种自适应布局以及媒体查询。
CSS Grid 主要由以下基本部分组成：
- 网格容器（Grid Container）： 一般指包含网格项目的父元素，可以使用
display: grid或display: inline-grid来定义为网格容器； - 网格项目（Grid Item）： 网格容器内的子元素，它们位于网格之间，通过
grid-column和grid-row属性来定义在网格中的位置、大小以及跨度； - 网格线（Grid Line）： 网格由水平线和垂直线组成，分别为称为行线和列线，网格项目可以跨越多个线。
使用 CSS Grid 实现柱图布局
以下是柱图布局的 HTML 结构和相应的 CSS 样式：
<div class="grid-container"> <div class="grid-item a">20</div> <div class="grid-item b">40</div> <div class="grid-item c">60</div> <div class="grid-item d">80</div> <div class="grid-item e">100</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- --- --- ---- ------------------- ---- ---- ----- ------- ------ ----------------- ----- - ---------- - ----------- ------- ----------------- ----- ------ ----- - -- - ------------ - - -- --------- - - -- - -- - ------------ - - -- --------- - - -- - -- - ------------ - - -- --------- - - -- - -- - ------------ - - -- --------- - - -- - -- - ------------ - - -- --------- - - -- -
以上样式定义了一个 5 列 4 行的网格容器，每一行高度为 1fr，宽度平均分配为 1fr 。其中，gap 属性用于定义网格元素之间的间隔，高度固定为 300px，背景色为灰色。
柱体宽度的分配比例可以通过网格项目的 grid-column: start / end 和 grid-row: start / end 属性决定，比如我们将第一个网格项目的 grid-column 属性定义为 1 / 2，grid-row 属性定义为 1 / 5，它就跨越了第一列到第二列，并覆盖了第一行到第四行，相当于将第一列作为柱体宽度的基准比例。
以此类推，可以根据实际的数据比例计算出每个网格项目的宽度和高度，实现柱图的效果。
总结
使用 CSS Grid 实现柱图布局可以有效地控制柱体的宽度比例和大小，而无需引入插件库。通过灵活掌握网格容器和网格项目的属性来控制布局，可以实现更加灵活多样的形状和需求。如果你是前端开发者，相信掌握 CSS Grid 等 CSS 技术，将有助于提升你的开发能力和对页面布局的掌控能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646128f9968c7c53b02a43a2