In a previous tutorial, we discovered methods to create a CSS-only vertical organizational chart. Immediately, as some of us requested, we’ll undergo the method of constructing its corresponding horizontal one. 

• 
  CSS
  CSS Charts: How to Create an Organizational Chart
  George Martsoukos

And right here’s the twist; we’ll create this new chart with out altering a single line of markup from the unique, we’ll solely modify the kinds.

Remember, because the idea stays the identical, we’ll be grabbing some components from the opposite tutorial. Prepared to check your CSS abilities once more?

The Organizational Chart We’re Constructing

Right here’s the CSS chart we’ll be creating:

On screens as much as 1300px large, the chart will seem in a vertical structure. On bigger screens, its knowledge will seem horizontally. Remember to verify this conduct by opening the demo on a big display screen and resizing your browser window. 

1. Specify the Container

Our chart will stay inside a container:

<div class="container">
  <!-- Chart goes right here -->
</div>

2. Outline Some Primary Types

Earlier than analyzing its ranges, we’ll arrange a number of reset guidelines and helper courses:

:root {
  --level-1: #8dccad;
  --level-2: #f5cc7f;
  --level-3: #7b9fe0;
  --level-4: #f27c8d;
  --black: black;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ol {
  list-style: none;
}

physique {
  margin: 50px 0 100px;
  text-align: middle;
  font: 20px/1.5 "Inter", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
}

.container {
  max-width: 800px;
  padding: 0 10px;
  margin: 0 auto;
  show: grid;
  align-items: middle;
  justify-content: middle;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.rectangle {
  place: relative;
  padding: 20px;
  width: 200px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

Discover the rectangle class. We’ll append this to each node/factor of our chart.

Moreover, control the container kinds. Due to CSS Grid, we will divide the chart into two components. The primary one will embrace the primary stage, whereas the second all of the others. Plus, we’ll give the container a most width that can have an effect on solely on smaller screens.

Observe: for simplicity, I haven’t optimized the CSS. This can assist you get a greater understanding of the kinds of every stage. 

3. Specify the Ranges

At this level, we’ll have a more in-depth have a look at the chart ranges. As you would possibly keep in mind from the earlier tutorial, we’ll have 4 of them:

Degree #1

The primary stage will solely embrace a single node:

HTML

To explain it, we’ll use an h1 tag because it’s an important a part of our chart:

<h1 class="level-1 rectangle">...</h1>

CSS

We’ll use its ::earlier than pseudo-element to create a relationship between the primary and second ranges:

/*CUSTOM VARIABLES HERE*/

.level-1 {
  background: var(--level-1);
}

.level-1::earlier than {
  content material: "";
  place: absolute;
  prime: 50%;
  left: 100%;
  remodel: translateY(-50%);
  width: 20px;
  top: 2px;
  background: var(--black);
}

Degree #2

The second stage will include two nodes:

HTML

To explain it, we’ll use an ordered checklist with two checklist objects. Every checklist merchandise will include an h2 factor:

<ol class="level-2-wrapper">
  <li>
    <h2 class="level-2 rectangle">...</h2>
  </li>
  <li>
    <h2 class="level-2 rectangle">...</h2>
  </li>
</ol>

CSS

Every checklist merchandise will act as a grid container that can include two columns. We’ll place the contents of its first one on the highest fringe of the column axis, whereas the contents of its final one on the underside fringe of the column axis.

We’ll additionally outline the ::earlier than and ::after pseudo-elements of the h2 parts. Their job will likely be to create the associations between the adjoining ranges:

/*CUSTOM VARIABLES HERE*/

.level-2-wrapper {
  place: relative;
  padding-left: 20px;
  border-left: 2px stable var(--black);
}

.level-2-wrapper::earlier than {
  show: none;
  content material: "";
  place: absolute;
  prime: -20px;
  left: 10px;
  width: 2px;
  top: calc(100% + 40px);
  background: var(--black);
}

.level-2-wrapper::after {
  show: none;
  content material: "";
  place: absolute;
  left: 10px;
  backside: -20px;
  width: calc(100% - 10px);
  top: 2px;
  background: var(--black);
}

.level-2-wrapper > li {
  place: relative;
  show: grid;
  align-items: flex-start;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.level-2-wrapper > li:last-child {
  margin-top: 100px;
  align-items: flex-end;
}

.level-2 {
  background: var(--level-2);
}

.level-2::earlier than {
  content material: "";
  place: absolute;
  prime: 50%;
  proper: 100%;
  remodel: translateY(-50%);
  width: 20px;
  top: 2px;
  background: var(--black);
}

.level-2::after {
  content material: "";
  place: absolute;
  prime: 50%;
  left: 100%;
  remodel: translateY(-50%);
  width: 20px;
  top: 2px;
  background: var(--black);
}

Degree #3

The third stage will embrace 4 nodes.

We’ll affiliate the primary two nodes with the primary node of the second stage, whereas the final two with its second node: 

HTML

Nonetheless, contained in the preliminary checklist the place the second stage lives, we’ll outline two new lists. Every one in all them will include two checklist objects. For every merchandise will specify an h3 factor:

<ol class="level-2-wrapper">
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
    </ol>
  </li>
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
    </ol>
  </li>
</ol>

CSS

Equally to the earlier stage, we’ll think about every checklist merchandise as a grid container and cut up it into two columns.

In the identical approach, we’ll set the ::earlier than and ::after pseudo-elements of the h3 parts for creating the required connections:

/*CUSTOM VARIABLES HERE*/

.level-3-wrapper {
  place: relative;
  prime: 34px;
  padding-left: 20px;
  border-left: 2px stable var(--black);
}

.level-3-wrapper::earlier than {
  show: none;
  content material: "";
  place: absolute;
  prime: 0;
  left: 10px;
  width: 2px;
  top: 100%;
  background: var(--black);
}

.level-3-wrapper::after {
  show: none;
  content material: "";
  place: absolute;
  left: 10px;
  backside: 0px;
  width: calc(100% - 10px);
  top: 2px;
  background: var(--black);
}

.level-3-wrapper > li {
  show: grid;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.level-3-wrapper > li:last-child {
  margin-top: 80px;
}

.level-2-wrapper > li:last-child .level-3-wrapper {
  prime: -34px;
}

.level-3 {
  background: var(--level-3);
}

.level-3::earlier than {
  content material: "";
  place: absolute;
  prime: 50%;
  proper: 100%;
  remodel: translateY(-50%);
  width: 20px;
  top: 2px;
  background: var(--black);
}

.level-3::after {
  content material: "";
  place: absolute;
  prime: 50%;
  left: 100%;
  remodel: translateY(-50%);
  width: 20px;
  top: 2px;
  background: var(--black);
}

Observe: in case your textual content nodes span onto a separate line, it’s a must to change the next hardcoded values: prime: 34px and prime: -34px.

Degree #4

We’ll want sixteen nodes for the fourth stage. These will equally be distributed into 4 lists.

Every third-level node will embrace one checklist:

HTML

Nonetheless, contained in the preliminary checklist the place the second stage lives, we’ll outline 4 new lists. Every one in all them will include 4 checklist objects. For every merchandise we’ll specify an h4 factor:

<ol class="level-2-wrapper">
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
    </ol>
  </li>
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

As soon as once more, we’ll do the identical actions. Firstly, we’ll use the CSS Grid to create the structure for the fourth-level nodes. Then, we’ll specify the required pseudo-element of goal parts for establishing the connections: 

/*CUSTOM VARIABLES HERE*/

.level-4-wrapper {
  place: relative;
  prime: 34px;
  show: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  padding-left: 20px;
}

.level-4-wrapper::earlier than {
  content material: "";
  place: absolute;
  prime: 0;
  left: 0;
  width: 2px;
  top: 50%;
  background: var(--black);
}

.level-3-wrapper > li:last-child .level-4-wrapper {
  prime: -34px;
}

.level-3-wrapper > li:last-child .level-4-wrapper::earlier than {
  prime: auto;
  backside: 0;
}

.level-4 {
  background: var(--level-4);
}

.level-4::earlier than {
  content material: "";
  place: absolute;
  prime: 50%;
  proper: 100%;
  remodel: translateY(-50%);
  width: 20px;
  top: 2px;
  background: var(--black);
}

Observe: in case your textual content nodes span on a separate line, it’s a must to change the prime: 34px and prime: -34px hardcoded values.

4. Going Responsive

As you have got already guessed, we observe a desktop-first strategy for our kinds. Typically talking, I favor constructing for giant screens first after which happening to smaller, easier ones.

On screens between 1301px and 1650px, the chart will nonetheless be in horizontal mode, but its nodes may have a smaller width (200px as an alternative of 150px).

On screens as much as 1300px large, all chart nodes will seem vertically, like this:

In contrast to the horizontal structure, right here the width and typography of the textual content nodes differ relying on their stage. The upper the extent, the bigger the width and typography.

After all, be at liberty to alter these breakpoints relying in your content material.

It’s price noting that this design is barely completely different in comparison with the responsive structure of the vertical chart:

In case you’re questioning, there is no particular goal behind this new implementation. I simply needed to indicate you two completely different responsive layouts. Be happy to make use of any of those in your pages.  

Listed below are the responsive kinds:

@media display screen and (max-width: 1650px) {
  .rectangle {
    width: 150px;
  }
}

@media display screen and (max-width: 1300px) {
  physique {
    font-size: 16px;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-size: revert;
  }

  .rectangle {
    padding: 20px 10px;
    width: auto;
  }

  .container {
    show: block;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::earlier than,
  .level-2::after,
  .level-3::after {
    show: none;
  }

  .level-2-wrapper::earlier than,
  .level-2-wrapper::after,
  .level-3-wrapper::earlier than,
  .level-3-wrapper::after,
  .level-2-wrapper > li,
  .level-3-wrapper > li {
    show: block;
  }

  .level-2-wrapper {
    padding-left: 30px;
    border-left: none;
  }

  .level-2-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-2-wrapper > li:last-child .level-3-wrapper,
  .level-3-wrapper > li:last-child .level-4-wrapper,
  .level-3-wrapper,
  .level-4-wrapper {
    prime: 0;
  }

  .level-3-wrapper {
    padding: 20px 0 20px 30px;
    border-left: none;
  }

  .level-3-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-4-wrapper {
    padding: 20px 0 0 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  .level-4-wrapper > li:first-child {
    margin-bottom: 20px;
  }

  .level-4-wrapper::earlier than {
    left: 10px;
    top: 100%;
  }
}

The Revert Key phrase

From the kinds above, hold a watch particularly on the brand new revert CSS key phrase that we apply to the headings. That may assist us restore their default browser kinds. Merrily sufficient, its browser support is rising daily. 

Conclusion

That’s all for at the moment, of us! At this level, you have got the whole lot it’s essential construct your personal CSS-only organizational charts.

Certainly, in an actual situation, you would possibly favor to make use of a strong JavaScript library like Highcharts.js for creating such a chart. Nonetheless, pushing the bounds of CSS with out ignoring its limitations is at all times an effective way to be taught and broaden your information. Furthermore, with the mix of instruments/options just like the CSS Grid and pseudo-elements you may accomplish actually neat issues.

Let’s remind ourselves of what we constructed:

Go forward, fork the demo and get your arms soiled. Don’t be afraid to destroy and experiment with it. You possibly can obtain completely different variations with out placing in an excessive amount of effort. For instance, right here’s one other fast different for desktop screens:

Final however not least, right here at Tuts+ there are quite a lot of detailed tutorials displaying methods to implement different kinds of CSS charts (typically with JavaScript). Ensure to take a look, and as at all times, thanks rather a lot for studying!

• 
  CSS Charts
  How to Build a Simple Gantt Chart With CSS and JavaScript
  George Martsoukos

• 
  CSS
  How to Build an Animated CSS Thermometer Chart
  George Martsoukos

• 
  CSS
  Build a Static Portfolio With Advanced CSS Bar Chart
  George Martsoukos

• 
  CSS
  CSS Charts: How to Create an Organizational Chart
  George Martsoukos

• 
  CSS
  How to Build a Static Portfolio Page With CSS & JavaScript
  George Martsoukos

• 
  CSS
  How to Build a Semi-Circle Donut Chart With CSS
  George Martsoukos