Skip to content

Instantly share code, notes, and snippets.

@akc42

akc42/index.html

Created December 16, 2019 15:50
Show Gist options
  • Save akc42/9a8d930d897e056c7e4e891feebb4fc8 to your computer and use it in GitHub Desktop.
Save akc42/9a8d930d897e056c7e4e891feebb4fc8 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes, shrink-to-fit=no">
<title>Grid Issue</title>
<style>
html {
background: #ffffff;
}
body {
margin: 0;
min-height: 100vh;
font-family: sans-serif;
line-height: 1.5;
letter-spacing: 0.1em;
background-color: #fafafa;
color: #333;
}
</style>
</head>
<body>
<style>
:root {
--pas-button-menu-height: 70px;
--pas-button-menu-width: 225px;
}
.menu-card {
grid-template-rows: auto repeat(4, minmax(var(--pas-menu-button-height), auto));
}
.three {
grid-template-rows: auto repeat(4, minmax(var(--pas-menu-button-height), auto));
grid-template-columns: repeat(4,var(--pas-menu-button-width));
grid-template-areas:
". selector . ."
"gridareaa1 gridareaa2 gridareaa3 gridareaa4"
"gridareab1 gridareab2 gridareab3 gridareab4"
"gridareac1 gridareac2 gridareac3 gridareac4"
"gridaread1 gridaread2 gridaread3 gridaread4";
}
.selectors {
display: flex;
flex-direction: column;
}
.three .selectors {
grid-area: selector;
}
#gridareaa1_portrait {
grid-area: gridareaa1;
}
#gridareaa2_portrait {
grid-area: gridareaa2;
}
#gridareaa3_portrait {
grid-area:gridareaa3;
}
#gridareaa4 {
grid-area: gridareaa4;
}
#gridareab1 {
grid-area: gridareab1;
}
#gridareab2 {
grid-area: gridareab2;
}
#gridareab3 {
grid-area: gridareab3;
}
#gridareab4 {
grid-area: gridareab4
}
#gridareac1 {
grid-area: gridareac1;
}
#gridareac2 {
grid-area: gridareac2;
}
#gridareac3 {
grid-area: gridareac3;
}
#gridareac4 {
grid-area: gridareac4;
}
#gridaread1 {
grid-area: gridaread1;
}
#gridaread2 {
grid-area: gridaread2;
}
#gridaread3 {
grid-area: gridaread3;
}
#gridaread4 {
grid-area: gridaread4;
}
section.menu-container {
display: flex;
flex-direction: column;
align-items: center;
}
section.menu-container > .menu-card {
margin: 40px 0 20px 0;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 38px -2px rgba(0,0,0,0.5);
background-color: white;
display: grid;
grid-gap: 30px;
}
</style>
<section class="menu-container">
<div class="menu-card three">
<div class="selectors">
<input id="startdate" type="date" label="Start Date" .value="1/11/2019"></input>
<input id="enddate" type="date"label="End Date" .value="30/11/2019" ></input>
</div>
<button id="gridareaa1_portrait" >Button A1</button>
<button id="gridareaa2_portrait">Button A2</button>
<button id="gridareaa3_portrait">Button A3</button>
<button id="gridareaa4" >Button A4</button>
<button id="gridareab1">Button B1</button>
<button id="gridareab2">Button B2</button>
<button id="gridareab3">Button B3</button>
<button id="gridaread2">Button D2</button>
<button id="gridareac4">Button C4</button>
<button id="gridareac1">Button C1</button>
<button id="gridareac2">Button C2</button>
<button id="gridaread1">Button D1</button>
<button id="gridaread3">Button D3</button>
<button id="gridaread4">Button D4</button>
<button id="gridareac3">Button C3</button>
<button id="gridareab4">Button B4</button>
</div>
</section>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes, shrink-to-fit=no">
<title>Grid Issue</title>
<style>
html {
background: #ffffff;
}
body {
margin: 0;
min-height: 100vh;
font-family: sans-serif;
line-height: 1.5;
letter-spacing: 0.1em;
background-color: #fafafa;
color: #333;
}
</style>
</head>
<body>
<style>
:root {
--pas-button-menu-height: 70px;
--pas-button-menu-width: 225px;
}
.menu-card {
grid-template-rows: auto repeat(4, minmax(var(--pas-menu-button-height), auto));
}
.three {
grid-template-rows: auto repeat(4, minmax(var(--pas-menu-button-height), auto));
grid-template-columns: repeat(4,var(--pas-menu-button-width));
grid-template-areas:
". selector . ."
"gridareaa1 gridareaa2 gridareaa3 gridareaa4"
"gridareab1 gridareab2 gridareab3 gridareab4"
"gridareac1 gridareac2 gridareac3 gridareac4"
"gridaread1 gridaread2 gridaread3 gridaread4";
}
.selectors {
display: flex;
flex-direction: column;
}
.three .selectors {
grid-area: selector;
}
#gridareaa1_portrait {
grid-area: gridareaa1;
}
#gridareaa2_portrait {
grid-area: gridareaa2;
}
#gridareaa3_portrait {
grid-area:gridareaa3;
}
#gridareaa4 {
grid-area: gridareaa4;
}
#gridareab1 {
grid-area: gridareab1;
}
#gridareab2 {
grid-area: gridareab2;
}
#gridareab3 {
grid-area: gridareab3;
}
#gridareab4 {
grid-area: gridareab4
}
#gridareac1 {
grid-area: gridareac1;
}
#gridareac2 {
grid-area: gridareac2;
}
#gridareac3 {
grid-area: gridareac3;
}
#gridareac4 {
grid-area: gridareac4;
}
#gridaread1 {
grid-area: gridaread1;
}
#gridaread2 {
grid-area: gridaread2;
}
#gridaread3 {
grid-area: gridaread3;
}
#gridaread4 {
grid-area: gridaread4;
}
section.menu-container {
display: flex;
flex-direction: column;
align-items: center;
}
section.menu-container > .menu-card {
margin: 40px 0 20px 0;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 38px -2px rgba(0,0,0,0.5);
background-color: white;
display: grid;
grid-gap: 30px;
}
</style>
<section class="menu-container">
<div class="menu-card three">
<div class="selectors">
<input id="startdate" type="date" label="Start Date" .value="1/11/2019"></input>
<input id="enddate" type="date"label="End Date" .value="30/11/2019" ></input>
</div>
<button id="gridareaa1_portrait" >Button A1</button>
<button id="gridareaa2_portrait">Button A2</button>
<button id="gridareaa3_portrait">Button A3</button>
<button id="gridareaa4" >Button A4</button>
<button id="gridareab1">Button B1</button>
<button id="gridareab2">Button B2</button>
<button id="gridareab3">Button B3</button>
<button id="gridaread2">Button D2</button>
<button id="gridareac4">Button C4</button>
<button id="gridareac1">Button C1</button>
<button id="gridareac2">Button C2</button>
<button id="gridaread1">Button D1</button>
<button id="gridaread3">Button D3</button>
<button id="gridaread4">Button D4</button>
<button id="gridareac3">Button C3</button>
<button id="gridareab4">Button B4</button>
</div>
</section>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment