Polytechnic-homework/Grid_Variant20_Boiko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Додати index.html

Browse source
This commit is contained in:
Shizanit 2025-11-21 20:24:56 +00:00
parent 7929d1fa86
commit 2d7938772b
1 changed files with 209 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

209
index.html Normal file
View file

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
.parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 0;
border: 2px solid black;
}
.parent > div {
border: 1px solid black;
}
.div1 {
grid-row: span 2 / span 2;
}
.div2 {
grid-column: span 8 / span 8;
}
.div3 {
grid-column-start: 10;
}
.div4 {
grid-column-start: 10;
grid-row-start: 2;
}
.div5 {
grid-column-start: 2;
grid-row-start: 2;
}
.div6 {
grid-column-start: 3;
grid-row-start: 2;
}
.div7 {
grid-column-start: 8;
grid-row-start: 2;
}
.div8 {
grid-column-start: 9;
grid-row-start: 2;
}
.div9 {
grid-column: span 4 / span 4;
grid-column-start: 4;
grid-row-start: 2;
}
.div10 {
grid-row: span 2 / span 2;
grid-row-start: 3;
}
.div11 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-row-start: 3;
}
.div17 {
grid-column-start: 4;
grid-row-start: 3;
}
.div18 {
grid-column-start: 5;
grid-row-start: 3;
}
.div19 {
grid-column-start: 6;
grid-row-start: 3;
}
.div20 {
grid-column-start: 7;
grid-row-start: 3;
}
.div21 {
grid-column-start: 4;
grid-row-start: 4;
}
.div22 {
grid-column-start: 5;
grid-row-start: 4;
}
.div23 {
grid-column-start: 6;
grid-row-start: 4;
}
.div24 {
grid-column-start: 7;
grid-row-start: 4;
}
.div25 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 8;
grid-row-start: 3;
}
.div26 {
grid-row: span 2 / span 2;
grid-column-start: 10;
grid-row-start: 3;
}
.div27 {
grid-row-start: 5;
}
.div28 {
grid-column-start: 1;
grid-row-start: 6;
}
.div29 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 2;
grid-row-start: 5;
}
.div30 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 4;
grid-row-start: 5;
}
.div31 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 6;
grid-row-start: 5;
}
.div32 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 8;
grid-row-start: 5;
}
.div33 {
grid-row: span 2 / span 2;
grid-column-start: 10;
grid-row-start: 5;
}
</style>
</head>
<body>
<div class="parent">
<div class="div1">ㅤ</div>
<div class="div2">ㅤ</div>
<div class="div3">ㅤ</div>
<div class="div4">ㅤ</div>
<div class="div5">ㅤ</div>
<div class="div6">ㅤ</div>
<div class="div7">ㅤ</div>
<div class="div8">ㅤ</div>
<div class="div9">ㅤ</div>
<div class="div10">ㅤ</div>
<div class="div11">ㅤ</div>
<div class="div17">ㅤ</div>
<div class="div18">ㅤ</div>
<div class="div19">ㅤ</div>
<div class="div20">ㅤ</div>
<div class="div21">ㅤ</div>
<div class="div22">ㅤ</div>
<div class="div23">ㅤ</div>
<div class="div24">ㅤ</div>
<div class="div25">ㅤ</div>
<div class="div26">ㅤ</div>
<div class="div27">ㅤ</div>
<div class="div28">ㅤ</div>
<div class="div29">ㅤ</div>
<div class="div30">ㅤ</div>
<div class="div31">ㅤ</div>
<div class="div32">ㅤ</div>
<div class="div33">ㅤ</div>
</div>
</body>
</html>