Skip to content

Instantly share code, notes, and snippets.

@guillefd

guillefd/grid.html

Last active June 9, 2018 21:51
Show Gist options
  • Save guillefd/68d181cc952c318eb69c3568cb618761 to your computer and use it in GitHub Desktop.
Save guillefd/68d181cc952c318eb69c3568cb618761 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grid.html
<html>
<style>
.item-header {
grid-area: header;
padding: 0px;
}
.item-btn-a {
grid-area: btnA;
padding: 0px;
}
.item-btn-b {
grid-area: btnB;
padding: 0px;
}
.item-btn-c {
grid-area: btnC;
padding: 0px;
}
.item-btn-d {
grid-area: btnD;
padding: 0px;
}
.item-footer {
grid-area: footer;
align-self: center;
padding: 0 35px;
}
.wrapper{
display: grid;
height: calc(100vh - 102px);
grid-template-columns: auto;
grid-template-rows: 230px auto auto 85px;
grid-template-areas:
'header header'
'btnA btnB'
'btnC btnD'
'footer footer';
grid-gap: 1px;
}
.wrapper > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
}
.wrapper > div > button {
height: 100%;
width: 100%;
font-size: 30px;
border: none;
background: #ddd;
}
</style>
<body>
<div class="wrapper">
<div class="item-header">
HEADER
</div>
<div class="item-btn-a">
LEFT
<div class="item-btn-b">
RIGHT
<div class="item-btn-c">
LEFT
<div class="item-btn-d">
RIGHT
<div class="item-footer">
<nav class="level is-mobile">
<p class="level-item has-text-centered">
<a>
LFT
</a>
</p>
<p class="level-item has-text-centered">
<a>
CTR
</a>
</p>
<p class="level-item has-text-centered">
<a>
RHT
</a>
</p>
</nav>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment