Use display:flex; with flex-direction:column.Apply this css:
#grph {
grid-area: grph;
display: flex;
flex-direction: column;
align-items:center;
justify-content: flex-start;
}
Solution 1 :
Solution 2 :
Try changing this
.box {
display-direction: column;
align-items: center;
}
Problem :
I’m trying to draw a shape multiple times using java script, in my case i am drawing a circle. I made a function that duplicate my element based on my selector, but when it draw the shape again to the screen, It draws it horizontally, I want to make it draw vertically.
I think the problem is the function is appending the element in the same place every time so that’s why it draw it horizontally (correct me if i’m wrong)
This is my code :
function duplicateCircle() {
//let num =1
let clone = document.querySelector('.circle').cloneNode( true );
//clone.setAttribute( 'id', `cmt${++num}`)
document.querySelector('#grph').appendChild( clone );
}.container{
display: grid;
width: 100%;
height: 45vw;
margin: auto;
gap: 25px;
border: 2px solid red;
grid-template-columns: repeat(2);
grid-template-rows: repeat(6,1fr);
grid-template-areas:
"cmd cmd grph grph grph grph "
"cmd cmd grph grph grph grph "
"cmd cmd grph grph grph grph "
"cmd cmd grph grph grph grph "
"cmd cmd grph grph grph grph "
"write write grph grph grph grph";
}
.box{
display: flex;
/*flex-direction: row;*/
justify-content: center;
border: 5px solid black;
}
.circle {
height: 50px;
width: 50px;
background-color: blueviolet;
border-radius: 50%;
border: 3px solid black;
}
#command {grid-area: cmd;}
#grph{grid-area: grph;}
#write{grid-area: write;}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<div class="container">
<div id="command" class="box"></div>
<div id="grph" class="box"><span class="circle"></span></div>
<div id="write" class="box">
<button id="draw" onclick="duplicateCircle()">Draw</button>
</div>
</div>
<script src="/scripts/functions.js"></script>
</body>
</html>Comments
Comment posted by Rishab Tyagi
Most Welcome :).Please accept this as answer if you like it.