Skip to content

Instantly share code, notes, and snippets.

@ramsesoriginal
Last active December 27, 2021 23:13
Show Gist options
  • Save ramsesoriginal/bff478c0e4d2475433b46a88610e9953 to your computer and use it in GitHub Desktop.
Save ramsesoriginal/bff478c0e4d2475433b46a88610e9953 to your computer and use it in GitHub Desktop.
Gwynne's Blocks
/**
* Gwynne's Blocks
*/
div {
width: 42rem;
height: 59.4rem;
position: relative;
background-color: red;
box-sizing: border-box;
}
article {
display: block;
float: left;
border: 1px solid black;
box-sizing: border-box;
margin: 0 0.1rem 0.1rem 0;
width: 10.4rem;
height: 14.8rem;
background-color: blue;
position: relative;
}
article header {
height: 1.5rem;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
background-color: green;
text-align: center;
vertical-align: middle;
}
article footer{
height: 1.5rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
text-align: center;
vertical-align: middle;
}
article main {
position: absolute;
top: 2rem;
bottom: 2rem;
left: 0.5rem;
right: 0.5rem;
background-color: pink;
}
<div>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
<article>
<header>
</header>
<main>
</main>
<footer>
</footer>
</article>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment