在前端开发中，经常需要用到柱状图这种数据可视化的图表，而实现柱状图布局的方式有很多种，其中 CSS Grid 布局是一种非常优雅和灵活的方式。本文将介绍如何使用 CSS Grid 布局实现柱状图，包括如何设置网格和网格项，如何使用伪元素和伪类来实现柱状图的样式，以及如何使用响应式布局来适应不同的屏幕尺寸。
设置网格
在 CSS Grid 布局中，我们需要使用 display: grid 属性来设置一个网格容器，然后使用 grid-template-columns 和 grid-template-rows 属性来设置网格的列数和行数。例如，下面的代码将创建一个包含 5 列和 4 行的网格：
.container { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); }
这个网格容器有 20 个网格项，每个网格项都是一个单元格，可以用 grid-column 和 grid-row 属性来指定单元格的位置。例如，下面的代码将设置第一个网格项的位置为第一行第一列，宽度为 3 个单元格，高度为 2 个单元格：
.item1 { grid-column: 1 / span 3; grid-row: 1 / span 2; }
设置柱状图样式
在实现柱状图布局时，我们通常需要使用伪元素或伪类来实现柱子的样式。例如，下面的代码将使用 ::before 伪元素来创建一个红色的柱子：
.item1::before { content: ""; background-color: red; height: 100%; }
这个代码将在 .item1 元素前创建一个空的伪元素，并把它的背景色设置为红色，高度设置为 100%。这样就可以实现一个红色的柱子了。
如果我们需要创建多个柱子，可以使用不同的伪元素或伪类。例如，下面的代码将使用 ::after 伪元素来创建一个蓝色的柱子：
.item1::after { content: ""; background-color: blue; height: 50%; }
这个代码将在 .item1 元素后创建一个空的伪元素，并把它的背景色设置为蓝色，高度设置为 50%。这样就可以实现一个蓝色的柱子了。
响应式布局
在实现柱状图布局时，我们通常需要考虑不同屏幕尺寸下的布局。为了实现响应式布局，我们可以使用媒体查询来针对不同的屏幕尺寸设置不同的网格模板。例如，下面的代码将在屏幕宽度小于 768 像素时，把网格模板改为 2 列和 8 行：
@media (max-width: 768px) { .container { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(8, 1fr); } }
这个代码将在屏幕宽度小于 768 像素时，把网格模板改为 2 列和 8 行。这样就可以实现在小屏幕下更紧凑的布局了。
示例代码
下面是一个完整的示例代码，演示如何使用 CSS Grid 布局实现柱状图布局：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ---- -------------------- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---- ----- -------- ----- ----------------- ----- ----------- ----------- - ------ - ------------ - - ---- -- --------- - - ---- -- --------- --------- - -------------- - -------- --- ----------------- ---- ------- ----- - ------------- - -------- --- ----------------- ----- ------- ---- --------- --------- ------- -- ----- -- ------ ----- - ------ - ------------ - - ---- -- --------- - - ---- -- --------- --------- - -------------- - -------- --- ----------------- ------ ------- ----- - ------------- - -------- --- ----------------- ------- ------- ---- --------- --------- ------- -- ----- -- ------ ----- - ------ ----------- ------ - ---------- - ---------------------- --------- ----- ------------------- --------- ----- - ------ - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- - - -------- ------- ------ ---- ------------------ ---- -------------------- ---- -------------------- ------ ------- -------展开代码
这个代码将创建一个包含两个网格项的网格容器，第一个网格项包含一个红色和蓝色两个柱子，第二个网格项包含一个绿色和黄色两个柱子。在屏幕宽度小于 768 像素时，网格容器的列数和行数会发生变化，以适应更小的屏幕尺寸。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cbe51be46428fe9e50425c
