How to make a pattern of div elements - html

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>

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>

create list of image in different size

I have many images & I want to create a list of images like this:
but I generate this list & images not placed correctly:

For this specific case you could just use a grid with template areas as that gives you good control over positioning.
Essentially your grid will have six columns and six rows.
I'll come back to this shortly and put up a snippet but I thought you might like this idea immediately and look into it in case of use.
UPDATE: here's a snippet using grid. Obviously you'll need to put the right background-image into each div.
.container {
display: grid;
grid-template-columns: repeat(6, 12vw);
grid-template-rows: repeat(6, 12vw);
grid-gap: 1vw;
}
.container div:nth-child(1) {
grid-row: 1/span 2;
grid-column: 1/span 2;
}
.container div:nth-child(14) {
grid-row: 3/ span 2;
grid-column: 3/ span 2;
}
.container div:nth-child(27) {
grid-row: 5/ span 2;
grid-column: 5/ span 2;
}
.container div {
background-image: url(https://i.stack.imgur.com/ukCns.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<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>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

One way is to group content into html groups and control them that way. Just depends on the overall application of what you're trying to do. This is also responsive as well.
img {
width: 100%;
display: flex;
}
.row {
display: flex;
}
#media(max-width: 768px){
.row {
flex-direction: column;
}
}
.row .group.count-1,
.row .group.count-4 {
width: 33%;
}
#media(max-width: 768px){
.row .group.count-1,
.row .group.count-4 {
width: 100%;
}
}
.row .group.count-4 {
display: flex;
flex-wrap: wrap;
}
.row .group.count-1 img,
.row .group.count-4 img {
margin: 1%;
}
#media(max-width: 768px){
.row .group.count-1 img,
.row .group.count-4 img {
margin: 0 0 1%;
}
}
.row .group.count-1 img {
width: 98%;
}
#media(max-width: 768px){
.row .group.count-1 img {
width: 100%;
}
}
.row .group.count-4 img {
width: 48%;
}
#media(max-width: 768px){
.row .group.count-4 img {
width: 100%;
}
}
<div class="container">
<div class="row">
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
</div>

How can i move a flex item in a container to the bottom?

Hello i have 2 flex items which is wrapped in a container. I want the div containing the button to be placed at the bottom of the parent div but in the demo the div is placed next to the sibling which makes the bottom place unused.
<div style="display:flex;flex-direction:row">
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div style="display:flex;flex-direction:column;border:1px solid green;width:150px" id="child1">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:row" id="child2">
<button>Add</button>
</div>
</div>
</div>
This is how i am creating the UI, i want the div which has id "child1" to take maximum height of the parent and should place the div with id "child2" at the bottom of parent div.Somebody help me in doing this

It depends what exact position you want to achieve if you just want to place the box at bottom with the current height only use this
<div style="display:flex;flex-direction:row">
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex-direction:column; margin:0; margin-top:auto" id="child1">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:row" id="child2">
<button>Add</button>
</div>
</div>
</div>
This another example increase the height to 100% of the parent div and bottom space will not be there.
<div style="display:flex;flex-direction:row">
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:column;border:1px solid black;width:200px">
<div style="display:flex;flex-direction:column;border:1px solid green;width:150px;flex:1" id="child1">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<div style="display:flex;flex-direction:row" id="child2">
<button>Add</button>
</div>
</div>
</div>

Add flex: 1; to the style of child1. More info on the flex property here

Scale Div and child element

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.