Skip to content

Instantly share code, notes, and snippets.

@neodigm

neodigm/ax.html

Last active June 16, 2019 00:18
Show Gist options
  • Save neodigm/76f80a1985107c472665c8c36f19c267 to your computer and use it in GitHub Desktop.
Save neodigm/76f80a1985107c472665c8c36f19c267 to your computer and use it in GitHub Desktop.
Download ZIP
Simple quad CSS grid layout
Raw
ax.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>QQQQ | emoji</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
padding: 0;
}
header {
text-align: center;
width: 100%;
min-height: 76px;
border: 1px solid #ccc;
position: fixed;
background: #666;
top: 0;
}
main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax( 256px, calc(50% - 4px) ));
QQQQgrid-template-rows: 68px auto 68px;
grid-gap: 8px;
justify-items: center;
margin: 80px 0;
min-height: 120vh;
}
main section.acx-card__quad {
border: 1px solid #646464;
border-radius: 8px 2px 8px 2px;
margin: 4px;
padding: 4px;
width: 98%;
}
footer {
text-align: center;
width: 100%;
min-height: 76px;
border: 1px solid #ccc;
background: #666;
position: fixed;
bottom: 0px;
}
@media screen and (max-width: 600px){
main {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width:48em)
{
/* small */
}
@media only screen and (min-width:48.1em) and (max-width:62em)
{
/* med */
}
@media only screen and (min-width:62.1em)
{
/* lg */
}
</style>
</head>
<body>
<header role="banner">
<h1>dsfasdf</h1>
</header>
<main role="main">
<section class="acx-card__quad" role="navigation">
<h2>xvcbxvb</h2>
<img src="https://www.tempotrip.com/img/product/TempoTripSite-devicemock.png" style="width: 100%">
</section>
<section class="acx-card__quad">
<h3>fdgscvb</h3>
</section>
<section class="acx-card__quad">
<h4>xbv cdc c</h4>
qqqqqqq
</section>
<section class="acx-card__quad">
<h4>Fldsvxzcv</h4>
</section>
</main>
<footer role="complementary">
<h5>fd adsf </h5>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment