JavaScriptCodeSnippets/gridLayout.html at master · rnagasudhakar/JavaScriptCodeSnippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3*n grid</title>
    </head>
    <body>
        <div style="width: 100%;">
            <div style="display: flex; flex-direction: row; width: 100%;">
            <div style="width: calc(33% - 10px); margin-right: 10px; background-color: red; padding-top: calc(100% / 3); " ></div>
            <div style="width: calc(33% - 10px); margin-right: 10px; background-color: yellow; padding-top: calc(100% / 3);"></div>
            <div style="width: calc(33% - 10px); margin-right: 10px; background-color:green; padding-top: calc(100% / 3);"></div>
            </div>
        </div>
    </body>
</html>