Skip to content

Instantly share code, notes, and snippets.

@frnsys

frnsys/index.html

Last active August 22, 2019 02:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frnsys/8c864b6582cad6d732b63bf7ee20f446 to your computer and use it in GitHub Desktop.
Save frnsys/8c864b6582cad6d732b63bf7ee20f446 to your computer and use it in GitHub Desktop.
Download ZIP
grid system
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
</div>
<div class="row">
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column column-3"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
<div class="column column-2"><div class="content"></div></div>
<div class="column"><div class="content"></div></div>
</div>
</body>
</html>
Raw
style.css
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
text-align: center;
}
.row {
padding: 4px 8px;
width: 100%;
display: flex;
}
.column {
height: 10vh;
width: calc((100% - 11*8px)/12);
margin-right: 8px;
}
.column:last-child {
margin-right: 0;
}
.content {
background: #3333ff;
width: 100%;
height: 100%;
}
.column-3 {
width: calc(3*(100% - 11*8px)/12 + 2*8px);
}
.column-2 {
width: calc(2*(100% - 11*8px)/12 + 1*8px);
}
/*
.column-N {
width: calc(N*(100% - 11*8px)/12 + (N-1)*8px);
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment