209 lines
No EOL
4.5 KiB
HTML
209 lines
No EOL
4.5 KiB
HTML
<!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> |