완성 이미지
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); }