Scale Div and child element - html

So I got this pixel image maded with divs
#dibujo {
margin: auto;
width: 390px;
height: 600px;
}
#dibujo div {
width: 30px;
height: 30px;
float: left;
}
body {
background-color: rgb(51, 173, 255);
}
a {
text-decoration: none;
}
#red {
background-color: rgb(230, 0, 0);
}
#orange {
background-color: rgb(230, 92, 0);
}
#black {
background-color: rgb(0, 0, 0);
}
#pink {
background-color: rgb(255, 51, 153);
}
#gray {
background-color: rgb(128, 128, 128);
}
#darkGray {
background-color: rgb(38, 38, 38);
}
#white {
background-color: rgb(255, 255, 255);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title></title>
</head>
<body>
<a href="http://fezgame.com/">
<div id="dibujo">
<div></div>
<div></div>
<div></div>
<div id="orange"></div>
<div id="red"></div>
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="orange"></div>
<div id="red"></div>
<div id="red"></div>
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="red"></div>
<div id="red"></div>
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="black"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="black"></div>
<div id="black"></div>
<div id="black"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="pink"></div>
<div id="pink"></div>
<div id="black"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="pink"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="darkGray"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</a>
</body>
The CSS has got a fixed size for the image, how can I change the CSS to make the div and the child reizable? I tried to make the #dibujo width: 30%; and the #dibujo div width: 10% but th entire image disappears.


Using viewport width/height and CSS calc() will give you this
body {
background-color: rgb(51, 173, 255);
}
#dibujo {
margin: auto;
width: 50vw; /* viewport width to scale */
height: 80vh; /* viewport height to scale */
}
#dibujo div {
width: calc(100% / 13); /* divide 13 div per row with 100% of parent */
height: calc(100% / 13); /* divide 13 row of div's with 100% of parent */
float: left;
}
a {
text-decoration: none;
}
#red {
background-color: rgb(230, 0, 0);
}
#orange {
background-color: rgb(230, 92, 0);
}
#black {
background-color: rgb(0, 0, 0);
}
#pink {
background-color: rgb(255, 51, 153);
}
#gray {
background-color: rgb(128, 128, 128);
}
#darkGray {
background-color: rgb(38, 38, 38);
}
#white {
background-color: rgb(255, 255, 255);
}
<a href="http://fezgame.com/">
<div id="dibujo">
<div></div>
<div></div>
<div></div>
<div id="orange"></div>
<div id="red"></div>
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="orange"></div>
<div id="red"></div>
<div id="red"></div>
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="red"></div>
<div id="red"></div>
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="black"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="black"></div>
<div id="black"></div>
<div id="black"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="pink"></div>
<div id="pink"></div>
<div id="black"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="pink"></div>
<div id="black"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div id="white"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="darkGray"></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div id="gray"></div>
<div></div>
<div></div>
<div></div>
<div id="darkGray"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</a>


Change the width of #dibujo to 30%, and then change the width of the inside divs to 7.69%, which is 100 divided by your number of divs -> 100/13. The same is with the height.
#dibujo{
margin: auto;
width: 30%;
height: 600px;
}
#dibujo div{
width: 7.69%;
height: 30px;
float: left;
}


width and height behave differently for a block element. For example, if you set the width on a div to be a 20%, it will adjust relative to the window as you shrink the window. The same is not true for height - the height will not resize as you shrink the window.
To make the height adjust as you resize (shrink) the window, you will have to set position: absolute;. The issue then becomes positioning your divs. This will require specifying top and maybe left rules, which you can also do as percentages. So, basically
#dibujo div{
position: absolute;
width: some %;
height: some %;
top: some %;
...
}
It'll be more work but the whole thing should resize as you shrink the window.

Related

I'd like to arrange divs by 5*10

I want to arrange 5*10 with all the boxes in the big box having the same space.
However, epending on the size of the small div, there are also six in a row. The same applies to justify-content and align-content after specifying in px.If I create a space with padding or margin, the spaces are superimposed between the boxes (6px if given as 3px).
How do I solve it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>과제 - 1</title>
<link rel="stylesheet" href="./과제1.css">
</head>
<body>
<div class="box">
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="item1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
.box{
display:flex;
flex-wrap:wrap;
width:550px;
height:550px;
background-color:rgb(213, 166, 174);
justify-content:space-evenly;
align-content:space-evenly;
}
.item1{
display:flex;
flex-wrap:wrap;
width:21%;
height:21%;
background-color:rgb(150, 119, 124);
overflow:overlay;
div{
width:15%;
height:15%;
border:1px solid black;
background-color:rgb(98, 79, 82);
}
}
.item1::-webkit-scrollbar {
width: 1vW;
}
.item1::-webkit-scrollbar-thumb {
height: 30%;
background-color: hsla(0, 0%, 98%, 0.29);
border-radius: 100px;
}
This is my result
The result I want

Seems like a job for grid, gap, and aspect-ratio:
.demo {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
background: skyblue;
padding: 10px;
}
.demo > * {
background: aliceblue;
aspect-ratio: 1;
}
<div class="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Stagger divs vertically

Is there a way to display divs in a staggered vertical arrangement like this image?
So far I have used Flexbox to get close but can't stagger the rows because I don't want to pre-determine how many circles are in each row, I want the user's browser width to control how many circles are per row (hence no classes or childs on the circle divs).
As the user's browser gets narrower, I want the circles to respond so that in a mobile size they would become 1 long single column.
Here is a Fiddle to show the code so far. I'd be open to JQuery if needed.
Thank you for any help.
* {margin: 0; padding: 0;}
body {font-family: Helvetica Neue; font-style: normal; text-align: center; color: #111;}
section {width: 100%; display: flex; flex-direction: column;}
.memoji_list {display: flex; flex-wrap: wrap; flex-direction: row;}
.memoji {background: green; border-radius:999px; width:100px; height:100px; margin: 0 auto;}
<body>
<section>
<div class="memoji_list">
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
</section>
</body>

The trick I made for hexagon shapes can be applied here:
.main {
display: flex;
--s: 100px; /* the circle size */
--m: 8px; /* control the distance between circles */
--vc: 10px; /* control the distance between rows */
--f: calc(2*var(--s) + 4*var(--m) - 2*var(--vc) - 2px);
}
.container {
font-size: 0;
}
.container div {
width: var(--s);
margin: var(--m);
height: var(--s);
display: inline-block;
font-size: initial;
border-radius:50%;
background:red;
margin-bottom: calc(var(--m) - var(--vc));
}
.container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 120%;
shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));
}
<div class="main">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

.row{
display:flex;
justify-content:space-evenly;
flex-direction:row;
}
.memoji{
width:100px;
height:100px;
background-color:green;
border-radius:50%;
}
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>

This is not responsive (and you have to enlarge the snippet window to "full page" size in order to get the amount of elements into the rows that you have in your image), but it's a starting point, using a max-width and margin: 0 auto for the container and a margin-left for .memoji:nth-child(11n - 4)
You could then use media queries to have different amounts of circles depending on the window width, with similar rules.
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica Neue;
font-style: normal;
text-align: center;
color: #111;
}
section {
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.memoji_list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.memoji {
background: green;
border-radius: 999px;
width: 100px;
height: 100px;
margin: 0 auto;
margin: 10px;
}
.memoji:nth-child(11n - 4) {
margin-left: 70px;
}
<body>
<section>
<div class="memoji_list">
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
</section>
</body>

How to make a pattern of div elements

What is the most efficient way to make a pattern of Div elements with incrementing ID's as numbers?
I want to have 56 columns and 80 rows. The first div created in the top left corner would have an id of 1, and the last div created in the bottom right corner would have an id of 4480.
I know I can do:
<style>
.myGrid{
display:grid;
grid-template-columns: 1fr 1fr 1fr and so on...;
grid-gap:5px;
grid-auto-rows: 50px;
grid-auto-columns: 50px;
}
</style>
<body>
<div class = "myGrid">
<div class = "gridItem" id = "1"><div>
<div class = "gridItem" id = "2"><div>
<div class = "gridItem" id = "3"><div>
and so on...
</div>
</body>
But this will take 100 years to type out, and I know there must be a better way.
The reason I want the id to increment is that I would like to target them with javascript once I have the grid pattern complete.

So make a for loop and start creating elements and add it to the page.
var temp = document.createElement("div");
temp.className = "myGrid";
var elem = document.createElement('div');
elem.className = 'gridItem';
for (var i = 0; i < 1000; i++) {
var copy = elem.cloneNode();
copy.setAttribute("data-id", i + 1);
temp.appendChild(copy);
}
document.body.replaceChild(temp, document.querySelector('.myGrid'));
.myGrid {
display: grid;
grid-gap: 5px;
grid-auto-rows: 50px;
grid-template-columns: repeat(20, 1fr);
}
div.gridItem {
border: 1px solid black;
}
div.gridItem::after {
content: attr(data-id);
}
<div class="myGrid"></div>

the patern of the grid can use the repeat() to set the templates, to increment ids, js will be required:
example :
let gridChild = document.querySelectorAll(".mygrid>div");
for (let i = 0; i < gridChild.length; i++) {
gridChild[i].setAttribute('id', 'grid-' + i);
}
.mygrid {
display: grid;
grid-template-columns: repeat(56, 50px);
grid-template-rows: repeat(80, 50px);
grid-gap: 5px;
/*
grid-auto-rows: 50px;
grid-auto-columns: 50px;
*/
width:max-content;
}
/* show id */
div {
border: 1px solid;
}
div div:before {
content: attr(id)
}
<div class="mygrid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Bootstrap - columns with spacing

I am trying to create four columns in a row using bootstrap. There should be some spacing between columns. please check the image. can someone tell me how to create a page like seen in the image?

Anoted in the comments below, your desired box width of 344px, 4*344=1376, this doesnt fit into the bootstrap grid system for smaller sizes, so will wrap, as such you will need to use e.g:
Demo Fiddle
HTML
<div class='wrapper'>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
.wrapper {
white-space:nowrap;
text-align:center;
}
.wrapper div {
display:inline-block;
background:lightblue;
margin:5px;
height:200px;
width:344px;
}
Otherwise the bootstrap way:
Demo Field
Given the HTML:
<div class="container">
<div class="row">
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
<div class="col-xs-3">
<div></div>
</div>
</div>
</div>
You can use the CSS (should be tidied)
[class*=col] div {
background:lightblue;
margin:5px;
height:200px;
}

DEMO UPDATED bootply: http://www.bootply.com/T8BDlFLpRD
You can use this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
<div class="col-md-3">
<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
</div>
</div>
</div>
CSS
body
{
background:orange;
}
.col-md-3{
height:200px;
padding-top:25px;
}

Using bootstrap:
<div class="row">
<div class="col-xs-3">block 1</div>
<div class="col-xs-3">block 2</div>
<div class="col-xs-3">block 3</div>
<div class="col-xs-3">block 4</div>
</div>
Inside each block, you can put your column content

Struggling to draw a line across a series of divs

Here is my code
http://jsfiddle.net/B8JYN/1/
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#outerdiv {
height: 50%;
width: 99%;
left:1%;
background-color: #000000;
position:absolute;
top:25%;
}
#fretboard {
position:absolute;
width: 100%;
top:5%;
height: 90%;
background-color: red;
}
.stringTitle {
height: 50%;
background-color: #000000;
position:absolute;
top:25%;
width:1%;
background-color: #fff;
}
.string{
height:16.666%
}
.fret{
width:8%;
float:left;
height:100%;
}
.fretEnd{
width:.3%;
background-color:#e7ebea;
float:left;
height:100%;
}
.E1{
background-color:green;
height: 3%;
margin-top: 11%;
}
.B{
background-color:green;
height: 3%;
margin-top: 23.5%;
}
.G{
background-color:green;
height: 3%;
margin-top: 23.5%;
}
.D{
background-color:green;
height: 3%;
margin-top: 23.5%;
}
.A{
background-color:green;
height: 3%;
margin-top: 23.5%;
}
.E2{
background-color:green;
height: 3%;
margin-top: 23.5%;
}
</style>
<div class="stringTitle">
<div class="string">E</div>
<div class="string">B</div>
<div class="string">G</div>
<div class="string">D</div>
<div class="string">A</div>
<div class="string">E</div>
</div>
<div id="outerdiv">
<div id="fretboard">
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fret">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
<div class="fretEnd">
<div class="E1"></div>
<div class="B"></div>
<div class="G"></div>
<div class="D"></div>
<div class="A"></div>
<div class="E2"></div>
</div>
</div>
</div>
I'm trying to get the green lines to be spaced equally in the vertical direction and continuously across from left to right. Hope that makes sense? I'm trying to make this using only percentages rather than specifying px

The percentage based margin-top value is relative to the width, therefore the positioning won't be consistent if the width of the browser is changed.
8 Box model - 8.3 Margin properties
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
One solution would be to absolutely position the elements and use a percentage based top value. It's important to relatively position the parent element in order for them to be positioned absolutely relative to the parent, in this case, .fret.
UPDATED EXAMPLE HERE
.E1, .B, .G, .D, .A, .E2 {
position:absolute;
width:100%;
background-color:green;
height: 3%;
}
.E1 {
top:9.6%;
}
.B {
top:26.2%;
}
.G {
top:42.9%;
}
.D {
top:59.6%;
}
.A {
top:76.4%;
}
.E2 {
top:91.2%;
}
Those are just rough estimates. You can of course change the values depending on your needs.