완성 이미지
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="grid-flex.less" />
<script src="//cdn.jsdelivr.net/npm/less" ></script>
<!--
<link rel="stylesheet" href="grid-flex.css" />
-->
<script src="prefixfree.min.js"></script>
<title>Electro Skunk</title>
</head>
<body>
<div class="container">
<header>
<h1>Electro Skunk</h1>
</header>
<div class="row">
<section class="grid_12">
<div class="box">12</div>
</section>
</div>
<div class="row">
<section class="grid_11">
<div class="box">11</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
</div>
<div class="row">
<section class="grid_10">
<div class="box">10</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
</div>
<div class="row">
<section class="grid_9">
<div class="box">9</div>
</section>
<section class="grid_3">
<div class="box">3</div>
</section>
</div>
<div class="row">
<section class="grid_8">
<div class="box">8</div>
</section>
<section class="grid_4">
<div class="box">4</div>
</section>
</div>
<div class="row">
<section class="grid_7">
<div class="box">7</div>
</section>
<section class="grid_5">
<div class="box">5</div>
</section>
</div>
<div class="row">
<section class="grid_6">
<div class="box">6</div>
</section>
<section class="grid_6">
<div class="box">6</div>
</section>
</div>
<div class="row">
<section class="grid_4">
<div class="box">4</div>
</section>
<section class="grid_4">
<div class="box">4</div>
</section>
<section class="grid_4">
<div class="box">4</div>
</section>
</div>
<div class="row">
<section class="grid_3">
<div class="box">3</div>
</section>
<section class="grid_3">
<div class="box">3</div>
</section>
<section class="grid_3">
<div class="box">3</div>
</section>
<section class="grid_3">
<div class="box">3</div>
</section>
</div>
<div class="row">
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
</div>
<div class="row">
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
<section class="grid_2">
<div class="box">2</div>
</section>
</div>
<div class="row">
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
<section class="grid_1">
<div class="box">1</div>
</section>
</div>
<footer>
<address>and Hope</address>
</footer>
</div>
</body>
</html>LESS 코드
//reset
* { margin: 0; padding: 0; }
body { font-family: 'Nanum Gothic', sans-serif; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; }
//style
header, footer {
width: 100%;
line-height: 100px;
background: green;
font-family: 'Black Han Sans', sans-serif;
text-align: center;
}
.box {
background: pink;
text-align: center;
}
//responsive size
@MaxWidth: 1200px;
@ColumnWidth: 80px;
@GutterWidth: 20px;
.container {
max-width: @MaxWidth;
min-height: 100vh;
margin: 0 auto;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-content: space-between;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: space-between;
}
.grid(@column) {
width: (@ColumnWidth * @column) + (@GutterWidth * (@column - 1));
margin: ((@GutterWidth / 4) - 1);
padding: (@GutterWidth / 4);
border: 1px solid black;
}
.grid_1 { .grid(1); }
.grid_2 { .grid(2); }
.grid_3 { .grid(3); }
.grid_4 { .grid(4); }
.grid_5 { .grid(5); }
.grid_6 { .grid(6); }
.grid_7 { .grid(7); }
.grid_8 { .grid(8); }
.grid_9 { .grid(9); }
.grid_10 { .grid(10); }
.grid_11 { .grid(11); }
.grid_12 { .grid(12); }
