div1
div2
div3
div4
div5
div6
div7
div8
div9
div10
div11
div12
div13
div14
div15
div16
Powrót do głównej strony









kod w html:


<body style="background-color: black;">
<div class="div-glowny">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
<div class="div7">div7</div>
<div class="div8">div8</div>
<div class="div9">div9</div>
<div class="div10">div10</div>
<div class="div11">div11</div>
<div class="div12">div12</div>
<div class="div13">div13</div>
<div class="div14">div14</div>
<div class="div15">div15</div>
<div class="div16">div16</div>
<div class="div17">

kod w css:


.div-glowny{
display: grid;

grid-template-columns: 20vh 20vh 40vh 20vh 20vh ;
grid-template-rows: 5vh 8vh 8vh 8vh 8vh 8vh 8vh 8vh 11vh 8vh 8vh;
text-align: center;
margin: center; }
.div1{
background-color: chartreuse;
grid-row: 1/2;
grid-column: 1/6;
border: 1px solid red;
}
.div2{
background-color: aqua;
grid-column: 1/2;
grid-row: 2/10;
border: 1px solid red;
}
.div3{

background-color: brown; grid-row: 2/4;
grid-column: 2/3;
border: 1px solid red;
}
.div4{
background-color: rgb(30, 219, 30);
grid-column: 2/3;
grid-row: 4/6;
border: 1px solid red;
}
.div5{
background-color:salmon;
border: 1px solid red;
grid-row: 6/8;
grid-column: 2/3;
}
.div6{
background-color: cornflowerblue;
border: 1px solid red;
grid-row: 8/10;
grid-column: 2/3;
}
.div7{
background-color: brown;
grid-row: 2/5;
grid-column: 3/4;
border: 1px solid red;
}
.div8{
background-color: darkgoldenrod;
border: 1px solid red;
grid-row: 5/8;
grid-column: 3/4;
}
.div9{
background-color: aqua;
border: 1px solid red;
grid-row: 8/10;
grid-column: 3/4;
}
.div10{
background-color: beige;
grid-row: 2/4;
grid-column: 4/5 ;
border: 1px solid red;
}
.div11{
background-color: chocolate;
border: 1px solid red;
grid-row: 4/6;
grid-column: 4/5;
}
.div12{
background-color: cyan;
border: 1px solid red;
grid-column: 4/5;
grid-row: 6/8;
}
.div13{
background-color: darkred;
border: 1px solid red;
grid-column: 4/6;
grid-row: 8/10;
}
.div14{
background-color: aquamarine;
border: 1px solid red;
grid-column: 5/6;
grid-row: 2/6;
}
.div15{
background-color: deeppink;
border: 1px solid red;
grid-row: 6/8;
grid-column: 5/6;
}
.div16{
background-color: blueviolet;
border: 1px solid red;
grid-column: 1/6;
}