One method of configuring the three columns is to float the left graph left, the right graph right, and to center the third column by using auto margin. This requires changing the order of the graphs in your HTML code so that the center column comes third after the two floated columns.
For inline elements (like iframes), the "auto" margin value cannot be calculated. So I made the graphs block elements.
For more reference on this method, see How to align 3 divs (left/center/right) inside another div?
iframe {
width: 150px;
height: 100px;
border: 1px solid #cccccc;
display: block;
}
.graph-left {
float: left;
border-color: red;
}
.graph-right {
float: right;
border-color: blue;
}
.graph-center {
margin: 0 auto;
}
<iframe class="graph-left" src="https://thingspeak.com/channels/219280/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Relative+Humidity+%28RH%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Relative+Humidity"></iframe>
<iframe class="graph-right" src="https://thingspeak.com/channels/219280/charts/3?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=pH+Time+Series+Chart&type=line&xaxis=Time&yaxis=pH"></iframe>
<iframe class="graph-center" src="https://thingspeak.com/channels/219280/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Air+Temperature+%28AT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Air+Temperature"></iframe>
<br>
<iframe class="graph-left" src="https://thingspeak.com/channels/219280/charts/4?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Light+Intensity+%28LI%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Light+Intensity"></iframe>
<iframe class="graph-right" src="https://thingspeak.com/channels/219280/charts/6?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Electrical+Conductivity+%28EC%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Electrical+Conductivity+%28EC%29"></iframe>
<iframe class="graph-center" src="https://thingspeak.com/channels/219280/charts/5?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Water+Temperature+%28WT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Water+Temperature+%28WT%29"></iframe>
Another method is to use a CSS multi-column layout. You may want to check the browser compatibility of this feature. At the time of this post, prefixes are required for maximum browser compatibility.
iframe {
width: 100%;
height: 150px;
border: 1px solid #cccccc;
display: block;
}
.graph_row {
margin: 0 0 1em;
-webkit-column-count: 3; /* Ch, Saf, And, BB */
-moz-column-count: 3; /* Fx */
column-count: 3; /* IE 10, Op 11.1+ */
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
<div class="graph_row">
<iframe class="graph" src="https://thingspeak.com/channels/219280/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Relative+Humidity+%28RH%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Relative+Humidity"></iframe>
<iframe class="graph graph-right" src="https://thingspeak.com/channels/219280/charts/3?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=pH+Time+Series+Chart&type=line&xaxis=Time&yaxis=pH"></iframe>
<iframe class="graph graph-center" src="https://thingspeak.com/channels/219280/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Air+Temperature+%28AT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Air+Temperature"></iframe>
</div>
<div class="graph_row">
<iframe class="graph graph-left" src="https://thingspeak.com/channels/219280/charts/4?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Light+Intensity+%28LI%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Light+Intensity"></iframe>
<iframe class="graph graph-right" src="https://thingspeak.com/channels/219280/charts/6?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Electrical+Conductivity+%28EC%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Electrical+Conductivity+%28EC%29"></iframe>
<iframe class="graph graph-center" src="https://thingspeak.com/channels/219280/charts/5?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Water+Temperature+%28WT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Water+Temperature+%28WT%29"></iframe>
</div>
