I'd like to arrange divs by 5*10 - html

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>

Related

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>

make multiple groups of images and paragraphs responsive inside a column

So I have multiple divs with images and another group of divs with p tags (only numbers) that make up an odontogram (a set of teeth with their corresponding numbers) inside a column which its length is 8 and then it is inside a boostrap card. Each image contains a div
Here is all the code https://codepen.io/luzsdx/pen/ExKqwXP
and here is a sample
<div class="row ">
<div class="col-md-8 odontograma">
<div class="card">
<div class="card-body">
<br>
<div class="pieceRow1">
<p class="pieza18" id="pieza18">18</p>
<p class="pieza17" id="pieza17">17</p>
<p class="pieza16" id="pieza16">16</p>
<p class="pieza15" id="pieza15">15</p>
<p class="pieza14" id="pieza14">14</p>
<p class="pieza13" id="pieza13">13</p>
<p class="pieza12" id="pieza12">12</p>
<p class="pieza11" id="pieza11">11</p>
<p class="pieza21" id="pieza21">21</p>
<p class="pieza22" id="pieza22">22</p>
<p class="pieza23" id="pieza23">23</p>
<p class="pieza24" id="pieza24">24</p>
<p class="pieza25" id="pieza25">25</p>
<p class="pieza26" id="pieza26">26</p>
<p class="pieza27" id="pieza27">27</p>
<p class="pieza28" id="pieza28">28</p>
</div>
<div class="fila1 d-flex justify-content-center">
<div class="pieza18" id="img18"><img class="diente18" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza17" id="img017"><img class="diente17" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza16" id="img17"><img class="diente16" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza15" id="img15"><img class="diente15" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza14" id="img14"><img class="diente14" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza13" id="img13"><img class="diente13" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza12" id="img12"><img class="diente12" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza11" id="img11"><img class="diente11" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3 ml-3"></div>
<div class="pieza21" id="img21"><img class="diente21" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza22" id="img22"><img class="diente22" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza23" id="img23"><img class="diente23" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza24" id="img24"><img class="diente24" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza25" id="img25"><img class="diente25" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza26" id="img26"><img class="diente26" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza27" id="img27"><img class="diente27" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza28" id="img28"><img class="diente28" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
</div>
</div>
</div>
</div>
I tried to put the class 'img-fluid' in the img but it makes them small and it doesn't make them responsive.
Is there a way to make number-image responsive inside the column with bootstrap or css?

Well if you really want an Ontogramm done with HTML and CSS, instead of using a graphic/image then a grid could do that. This grid, however, will require a min-width of 720px to be displayed correctly. Below that, you're having issues solely based on the size. It should adapt to the screen size and expand to its full width by its own.
body {
min-width: 720px;
display: grid;
grid-template-columns: repeat(17, 1fr);
grid-auto-rows: auto;
grid-gap: 2px;
padding: 2px;
text-align: center;
}
div {
width: 100%;
height: auto;
padding: 0;
margin: 0;
object-fit: contain;
}
<body>
<!-- 1st Row -->
<div>18</div>
<div>17</div>
<div>16</div>
<div>15</div>
<div>14</div>
<div>13</div>
<div>12</div>
<div>11</div>
<div></div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<!-- 2nd Row -->
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<!-- 3rd Row -->
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<!-- 4th Row -->
<div>48</div>
<div>47</div>
<div>46</div>
<div>45</div>
<div>44</div>
<div>43</div>
<div>42</div>
<div>41</div>
<div></div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<!-- 5th Row -->
<div></div>
<div></div>
<div></div>
<div>55</div>
<div>54</div>
<div>53</div>
<div>52</div>
<div>51</div>
<div></div>
<div>61</div>
<div>62</div>
<div>63</div>
<div>64</div>
<div>65</div>
<div></div>
<div></div>
<div></div>
<!-- 6th Row -->
<div></div>
<div></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div></div>
<div></div>
<!-- 7th Row -->
<div></div>
<div></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div></div>
<div></div>
<!-- 8th Row -->
<div></div>
<div></div>
<div></div>
<div>85</div>
<div>84</div>
<div>83</div>
<div>82</div>
<div>81</div>
<div></div>
<div>71</div>
<div>72</div>
<div>73</div>
<div>74</div>
<div>75</div>
<div></div>
<div></div>
<div></div>
</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>

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.