Skip to content

Instantly share code, notes, and snippets.

@blasten

blasten/responsive-grid.html

Created March 21, 2016 21:28
Show Gist options
  • Save blasten/424312a92ba557ad38d0 to your computer and use it in GitHub Desktop.
Save blasten/424312a92ba557ad38d0 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive grid using CSS custom properties
Raw
responsive-grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive Grid</title>
<style>
body {
background-color: #ddd;
margin: 0;
}
.responsiveGrid {
--columns: 3;
--gutter: 10px;
margin: 10px 0 10px 10px;
}
.responsiveGrid [grid-item] > div {
display: flex;
align-items: center;
justify-content: center;
background-color: white;
font: bold 12px arial;
text-align: center;
padding: 10px;
}
.expanded {
--item-columns: 3;
}
.expanded[grid-item] > div {
background-color: #7baaf7;
}
@media(max-width: 800px) {
.responsiveGrid {
--columns: 2;
}
.expanded {
--item-columns: 1;
}
}
@media(max-width: 400px) {
.responsiveGrid {
--columns: 1;
}
}
</style>
<style>
/* Implementation */
:root {
--gutter: 0px;
--columns: 1;
--item-height: 100%;
--item-columns: 1;
}
grid-container {
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
grid-container > [grid-item] {
display: block;
position: relative;
content: var(--columns);
flex: 1 1 calc(100% / var(--columns) * var(--item-columns) - var(--gutter));
max-width: calc(100% / var(--columns) * var(--item-columns) - var(--gutter));
margin-right: var(--gutter);
margin-bottom: var(--gutter);
}
grid-container > [grid-item]::before {
content: "";
display: block;
padding-top: calc((var(--item-height) - var(--gutter) * (var(--item-columns) - 1)) / var(--item-columns));
}
grid-container > [grid-item] > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<grid-container class="responsiveGrid">
<div grid-item>
<div>Item 1</div>
</div>
<div grid-item>
<div>Item 2</div>
</div>
<div grid-item>
<div>Item 3</div>
</div>
<div grid-item class="expanded">
<div>Expanded item takes 3 columns in wide screen and 1 column in small screen</div>
</div>
<div grid-item>
<div>Item 5</div>
</div>
<div grid-item>
<div>Item 7</div>
</div>
<div grid-item>
<div>Item 8</div>
</div>
<div grid-item>
<div>Item 9</div>
</div>
<div grid-item>
<div>Item 10</div>
</div>
<div grid-item>
<div>Item 11</div>
</div>
<div grid-item>
<div>Item 12</div>
</div>
<div grid-item>
<div>Item 13</div>
</div>
<div grid-item>
<div>Item 14</div>
</div>
<div grid-item>
<div>Item 15</div>
</div>
<div grid-item>
<div>Item 16</div>
</div>
<div grid-item>
<div>Item 17</div>
</div>
<div grid-item>
<div>Item 18</div>
</div>
<div grid-item>
<div>Item 19</div>
</div>
<div grid-item>
<div>Item 20</div>
</div>
<div grid-item>
<div>Item 21</div>
</div>
<div grid-item>
<div>Item 22</div>
</div>
<div grid-item>
<div>Item 23</div>
</div>
<div grid-item>
<div>Item 24</div>
</div>
<div grid-item>
<div>Item 25</div>
</div>
<div grid-item>
<div>Item 26</div>
</div>
<div grid-item>
<div>Item 27</div>
</div>
<div grid-item>
<div>Item 28</div>
</div>
<div grid-item>
<div>Item 29</div>
</div>
<div grid-item>
<div>Item 30</div>
</div>
<div grid-item>
<div>Item 31</div>
</div>
<div grid-item>
<div>Item 32</div>
</div>
<div grid-item>
<div>Item 33</div>
</div>
<div grid-item>
<div>Item 34</div>
</div>
</grid-container>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment