How to creating a Graph Bar with pure CSS Grid


How to create a Graph Bar with pure CSS Grid

Hello I am Nishat today I am showing you How to create a Graph Bar with pure CSS Grid.

I will fully explain here how it is made and designed with pure CSS.

We need here

We know how to write HTML code inside an HTML file and we have already got an idea about that and in this case, we will show you how to write these codes inside an HTML file.

First of all, we need HTML code here. I am giving below you can copy and use it.

<figure aria-hidden="true">
    <div class="graph">
        <span class="graphRowLabel">100</span>
        <span class="graphRowLabel">90</span>
        <span class="graphRowLabel">80</span>
        <span class="graphRowLabel">70</span>
        <span class="graphRowLabel">60</span>
        <span class="graphRowLabel">50</span>
        <span class="graphRowLabel">40</span>
        <span class="graphRowLabel">30</span>
        <span class="graphRowLabel">20</span>
        <span class="graphRowLabel">10</span>
        <div class="graphBar"></div>
        <div class="graphBar"></div>
        <div class="graphBar"></div>
        <div class="graphBar"></div>
        <div class="graphBar"></div>
        <span><sup>Y </sup>&frasl;<sub> X</sub></span>
        <span class="graphColumnLabel">2001</span>
        <span class="graphColumnLabel">2005</span>
        <span class="graphColumnLabel">2008</span>
        <span class="graphColumnLabel">2011</span>
        <span class="graphColumnLabel">2020</span>

Copy this full code and include the code you HTML body section in and pure CSS code is used to enhance the beauty of the HTML code. Copy the CSS code below and use it in your style sheet.

.graph {
    display: grid;
    grid: repeat(10, auto) max-content / max-content repeat(5, auto);
    height: 100%;
.graphBar {
    grid-row: 1 / -2;
    border-radius: 0 0 50% 50% / 0 0 10px 10px;
    background: #f2f1eb47
        linear-gradient(to top, #430784fa var(--h), transparent var(--h));
    justify-self: center;
    width: 45px;
    height: 100%;
.graphBar:nth-of-type(1) {
    grid-column: 2;
    --h: 10%;
.graphBar:nth-of-type(2) {
    grid-column: 3;
    --h: 65%;
.graphBar:nth-of-type(3) {
    grid-column: 4;
    --h: 52%;
.graphBar:nth-of-type(4) {
    grid-column: 5;
    --h: 100%;
.graphBar:nth-of-type(5) {
    grid-column: 6;
    --h: 92%;
.graphBar::after {
    display: block;
    content: "";
    height: 20px;
    border-radius: 50% / 10px;
.graphBar::before {
    margin-top: -10px;
    background-color: #512b65;
.graphBar::after {
    background-color: #330663;
    position: relative;
    top: calc(100% - var(--h) - 20px);
.graphRowLabel {
    margin-top: -0.5em;
.graphColumnLabel {
    justify-self: center;
    margin-top: 6px;
    text-shadow: 0 0 2px palegoldenrod;
    font-size: 14pt;
.graphRowLabel::after {
    display: inline-block;
    content: "\2000\2000\2014";
.graphRowLabel:nth-of-type(1)::after {
    content: "\2000\2014";
body {
    font-family: "crimson text";
    background: linear-gradient(to top right, #021a31, #5a0365);
    color: cornsilk;
    height: 100vh;
    font-weight: bold;
    overflow: hidden;
    text-shadow: 0 0 1px grey;
figure {
    width: 98vw;
    max-width: 600px;
    height: 420px;
    margin: 60px auto auto auto;
figcaption {
    text-align: center;
    margin-top: 30px;
h1 {
    text-align: center;
    font-size: 14pt;
    margin-bottom: 0;
.screenreader-text {
    display: block;
    height: 1px;
    width: 1px;
    overflow: hidden;

You may have noticed that while designing this graph page where you have to face new HTML codes. We are presenting these new HTML codes to you and explaining what these codes do.

What is figure Tag in HTML

The <figure> tag specifies self-contained content such as images, diagrams, photos, code lists, etc.

Use the <figure> element to mark a photo in a document and the < figcaption > element to define a caption for an image. like this below 


 <img src="your-image.jpg" alt="your-image-alt" style="width:100%">
 <figcaption>13, 30, 40, 50</figcaption>

What is aria-hidden="true" in pure CSS

Adding aria-hidden = "true" to an element removes that element and all its children from the accessibility tree. By hiding it, supportive technology can improve the experience for users:

  • Purely decorative element, icon or image of the needle
  • Duplicate content like duplicate texts
  • Offscreen or collapsed content, this kind of guy

according to the fourth rule of ARI, aria-hidden = "true" no focusable element should be used. Furthermore, since this trait is inherited by the descendants of an element, it should not be associated with the element's parents or ancestors for consideration.

Aria-hidden = "false" will not reproduce the material used in the auxiliary technology if one of its parents specifies aria-hidden = "true".

<figure aria-hidden="true/false"></figure>


If you like this design, please comment. I hope you like this song because I like it a lot. So I think you guys will like this design a lot.

Post a Comment