用CSS Grid合理布局制做1个回应式柱状图的完成

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

全新1段時间较为喜爱蹂躏图表,出于好奇心,我想找出较为好的用 CSS 制做图表的计划方案。刚开始学习培训在网上开源系统图表库,它对我学习培训新的和不熟习的前端开发技术性很有协助,例如这个:CSS Grid。

今日和大伙儿共享我学到的新专业知识:怎样用 CSS Grid 合理布局制做1个一般的回应式柱状图。先上实际效果图:

这篇文章内容的示例只是1个实验,用来学习培训 CSS Grid 合理布局,再加自己也是现学现卖,因此本文出現的编码不具备太多的参考实际意义。

第1个简易版本号

第1眼看上去将会会有点不知道道如何刚开始,因而大家先来关心怎样建立1个简易的版本号。最先,大家必须为图表撰写 HTML 标识:

<div class="chart">
  <div class="bar⑴"></div>
  <div class="bar⑵"></div>
  <div class="bar⑶"></div>
  <div class="bar⑷"></div>
  <!-- 1直至 bar⑴2 -->
</div>

这些 bar- 开始的 div 标识将对应柱状图中的1条柱子,整篇文章内容所必须的 HTML 就这么多。

如今依照我的流程和简易的解說1步1步用 CSS 把柱状图大约的款式画出来,无需过量地担忧下面出現的将会对你一些生疏的 CSS 词义,稍后大家将关键详细介绍有关 CSS Grid 的专业知识。

好了,如今刚开始大家的 CSS 款式撰写。大家先对父元素加上1些必要的款式:

* {
  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 有关的款式:

.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 等分成1行(这样便捷测算),它们之间有 5px 的间距。”

到这里,大家的图表依然是空的,由于大家沒有告知大家的子元素怎样去占有网格中的室内空间。大家应用 grid-row-startgrid-row-end 特性来填充网格中的竖直室内空间,后而大家将根据更改这两个特性来界定各个子元素自身的高宽比。为款式类为 bar 开始子元素加上以下样:

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

如今能够获得这样的实际效果:

大家告知每一个柱状图从网格的顶部(1)刚开始,随后在底部(101)完毕。上面大家把网格区划了 100 行,为何要应用 101 做为该特性的值呢?假如你被这些 Grid 特性搞蒙了,没事儿!在大家再次以前,让大家对此开展1点讨论。

了解网格线

Grid 合理布局的1个独特的地方便是网格线的定义,这对了解这个新的合理布局专用工具十分关键。下列是网格线在4行4列网格中绘图的示用意:

这4行4列的对应的款式是这样的(独特的黑色地区对应的款式类为 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-rowgrid-row-startgrid-row-end 的简写特性,前者表明元素在网格中的刚开始部位,后者表明元素在网格中的完毕部位。留意到没,黑色块是从第 2 条网格线刚开始的,并在第 4 条网格线完毕(而并不是在第 4 行)。假如大家想让那个黑盒子铺满全部 4 行,那末大家必须在第 5 条网格线完毕,即:1 / 5。了解这1点很关键。

换句话说,大家不可该觉得子元素在1个网格中占有全部行或列,而应当只超越这些网格线的。我花了很多時间才从定义上了解并习惯性了这1点,由于我近期深层次科学研究了 Jen Simmons 有关这个难题的实例教程。

返回示例

这便是为何在大家上面的图表明例中,全部列都在 101 这个值完毕,由于 101 意味着的是第 101 条互联网线,而并不是第 100 行。

如今,因为大家的 .chart 应用了 vw/vh 企业,也就有了1个回应优良的图表,不必须再做其它的附加工作中来适用回应式。假如你调剂访问器尺寸,你会发现它能够很好地缩小或拓宽,它一直占有全部视窗。

了解了互联网线的定义,大家便可以很轻轻松松地为柱子调剂高宽比了,大家必须让各柱子高宽比摇缀不1。

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

最终大家使寄偶数的柱子色调不1样:

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

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

实际效果:

大家就这样制做进行了1个适用回应式的柱状图。自然,这个示例只是1个刚开始,间距要做到具体运用的实际效果也有许多事儿要做。例如画标明和轴、根据 JS 来关联真正的业务流程数据信息等。

到此这篇有关用CSS Grid合理布局制做1个回应式柱状图的完成的文章内容就详细介绍到这了,更多有关CSS Grid回应式柱状图內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!