Skip to content

Instantly share code, notes, and snippets.

@conectado

conectado/grid-responsiveness-example.markdown

Created June 30, 2018 04:40
Show Gist options
  • Save conectado/0f3595c039124395c54e01419f9b1426 to your computer and use it in GitHub Desktop.
Save conectado/0f3595c039124395c54e01419f9b1426 to your computer and use it in GitHub Desktop.
Download ZIP
Grid responsiveness example
Raw
index.html
<body>
<div class="grid-wrapper">
<div class="sub-grid-wrapper">
<div class="item-up">
</div>
<div class="item-up">
</div>
</div>
<div class="sub-grid-wrapper">
<div class="item-up">
</div>
<div class="item-up">
</div>
</div>
<div class="sub-grid-wrapper">
<div class="item-down">
</div>
<div class="item-down">
</div>
</div>
<div class="sub-grid-wrapper">
<div class="item-down">
</div>
<div class="item-down">
</div>
</div>
</div>
</body>
Raw
style.css
body {
background-color: rgb(29,30,40);
}
.item-up {
background-color: rgb(189,215,238);
}
.item-down {
background-color: rgb(248,203,173);
}
.sub-grid-wrapper {
display: grid;
grid-template-columns: repeat(2, 200px);
grid-column-gap: 10px;
}
.grid-wrapper {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(auto-fit, 410px);
grid-row-gap: 10px;
grid-column-gap: 10px;
max-width: 830px;
max-height: 210px;
overflow-y: hidden;
margin: 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment