Skip to content

Instantly share code, notes, and snippets.

@typehorror

typehorror/index.html

Created August 15, 2020 22:26
Show Gist options
  • Save typehorror/0960c35a8ff9fd6fd94a2774b02e9eb6 to your computer and use it in GitHub Desktop.
Save typehorror/0960c35a8ff9fd6fd94a2774b02e9eb6 to your computer and use it in GitHub Desktop.
Download ZIP
Grid Work
Raw
index.html
<html>
<head>
<style>
html {
font-family: sans-serif;
}
code {
background-color: #333333;
color: #dddddd;
padding: 4px 8px;
border-radius: 4px;
margin: 1rem;
display: block;
white-space: pre-wrap
}
.grid-4-cols {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 4px;
column-gap: 4px;
}
.grid-span-1 {
grid-column: span 1 / span 1;
background: #ddffff;
padding: 1rem;
}
.grid-span-3 {
grid-column: span 3 / span 3;
background: #ffdddd;
padding: 1rem;
}
.grid-span-4 {
grid-column: span 4 / span 4;
background: #ddddff;
}
.hero {
min-height: 250px;
background: url("https://lh3.googleusercontent.com/proxy/_eBfbVEa42m8ubDIIXodP205whltpKGeoTmQBux-4BsyEJfPqKWMaTWh7UkOn6fBx6XLmGqnaCCU5HQYWGes_qvMNc-ma2L83JhnMUEwBcRdg3H2z16ozLcn9c-bSuEjItcDrOY");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.hero-title {
position: absolute;
right: 15px;
bottom: 15px;
padding: 1rem 2rem;
font-size: 2rem;
background-color: #eeeeee;
color: #656565;
}
</style>
</head>
<body>
<code style="background-color: #555; padding: 8px 32px;">
/* The grid definition */
.grid-4-cols {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 4px;
column-gap: 4px;
}
</code>
<div class="grid-4-cols">
<div class="grid-span-4">
<code>
.grid-span-4 {
grid-column: span 4 / span 4;
background: #ddddff;
}
</code>
</div>
<div class="grid-span-4 hero">
<code>
.grid-span-4 {
grid-column: span 4 / span 4;
background: #ddddff;
}
.hero {
min-height: 250px;
background: url("https://...some_image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
}
</code>
<div class="hero-title">Foo Bar Baz - Title</div>
</div>
<div class="grid-span-1">
<code>
.grid-span-1 {
grid-column: span 1 / span 1;
background: #ddffff;
padding: 1rem;
}
</code>
</div>
<div class="grid-span-3">
<code>
.grid-span-3 {
grid-column: span 3 / span 3;
background: #ffdddd;
padding: 1rem;
}
</code>
</div>
<div class="grid-span-1">
<code>
.grid-span-1 {
grid-column: span 1 / span 1;
background: #ddffff;
padding: 1rem;
}
</code>
</div>
<div class="grid-span-3">
<code>
.grid-span-3 {
grid-column: span 3 / span 3;
background: #ffdddd;
padding: 1rem;
}
</code>
</div>
<div class="grid-span-1">
<code>
.grid-span-1 {
grid-column: span 1 / span 1;
background: #ddffff;
padding: 1rem;
}
</code>
</div>
<div class="grid-span-3">
<code>
.grid-span-3 {
grid-column: span 3 / span 3;
background: #ffdddd;
padding: 1rem;
}
</code>
</div>
<div class="grid-span-4">
<code>
.grid-span-4 {
grid-column: span 4 / span 4;
background: #ddddff;
}
</code>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment