I'm a newbie in HTML. I'm currently trying to put 4 sets of two graphs side by side on a webpage. So each set would have a graph above and below. My code is as the following:
<template>
<div class = "container">
<div >
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch1" id="prpsch1" >
</div>
</div>
</div>
</div>
</div>
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch1" id="prpdch1" >
</div>
</div>
</div>
</div>
</div>>
</div>
<div >
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch2" id="prpsch2" >
</div>
</div>
</div>
</div>
</div>
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch2" id="prpdch2" >
</div>
</div>
</div>
</div>
</div>>
</div>
<div >
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch3" id="prpsch3" >
</div>
</div>
</div>
</div>
</div>
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch3" id="prpdch3" >
</div>
</div>
</div>
</div>
</div>>
</div>
<div >
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch4" id="prpsch4" >
</div>
</div>
</div>
</div>
</div>
<div class ="row">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch4" id="prpdch4" >
</div>
</div>
</div>
</div>
</div>>
</div>
</div>
</template>
However, webpage just every charts from top to bottom. And those charts are not even whole.
I want to put the 8 charts in 2 rows and 4 columns in the blank portion of the page.
How can I do it?
Thanks a lot in advance!
CodePudding user response：
<template>
<div class = "container">
<div >
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch1" id="prpsch1" >
</div>
</div>
</div>
</div>
</div>
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch1" id="prpdch1" >
</div>
</div>
</div>
</div>
</div>>
</div>
<div >
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch2" id="prpsch2" >
</div>
</div>
</div>
</div>
</div>
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch2" id="prpdch2" >
</div>
</div>
</div>
</div>
</div>>
</div>
<div >
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch3" id="prpsch3" >
</div>
</div>
</div>
</div>
</div>
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch3" id="prpdch3" >
</div>
</div>
</div>
</div>
</div>>
</div>
<div >
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref="prpsch4" id="prpsch4" >
</div>
</div>
</div>
</div>
</div>
<div class ="col-xl-3 col-lg-6">
<div >
<div >
<h4 >Graph</h4>
<a ><i ></i></a>
</div>
<div >
<div >
<div ref = "prpdch4" id="prpdch4" >
</div>
</div>
</div>
</div>
</div>>
</div>
</div>
</template>
Try this it will definatly help..
CodePudding user response：
Using Flexbox:
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.graph {
background: linear-gradient(30deg, #ccc5, #ccc, #ccc5);
flex-basis: calc(25% - 5px);
}<div >
<div >Graph 1</div>
<div >Graph 2</div>
<div >Graph 3</div>
<div >Graph 4</div>
<div >Graph 5</div>
<div >Graph 6</div>
<div >Graph 7</div>
<div >Graph 8</div>
</div>You define graphs' size in flex-basis. If you use gap (like my example, you need to substract it from it).
Using Grid:
(More useful if you know beforehand the structure of your content)
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 500px));
grid-gap: 5px;
}
.graph {
background: linear-gradient(30deg, #ccc5, #ccc, #ccc5);
}<div >
<div >Graph 1</div>
<div >Graph 2</div>
<div >Graph 3</div>
<div >Graph 4</div>
<div >Graph 5</div>
<div >Graph 6</div>
<div >Graph 7</div>
<div >Graph 8</div>
</div>The magic happens with grid-template-columns: repeat(auto-fit, minmax(250px, 500px));. This makes your graphs responsive. It will give them 500px when the graph elements are displayed in a big screen. When you view them in a small screen and elements are going smaller, they will start autofilling below each other.