Skip to content

Instantly share code, notes, and snippets.

@oelna

oelna/grid-demo.html

Created October 7, 2022 13:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oelna/3dfffd9cfda4fccd8ceb06c7b9d327d0 to your computer and use it in GitHub Desktop.
Save oelna/3dfffd9cfda4fccd8ceb06c7b9d327d0 to your computer and use it in GitHub Desktop.
Download ZIP
A very basic implementation of a six column grid in HTML and CSS
Raw
grid-demo.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Raster Tests</title>
<style>
html {
font: 24px/1.25 system-ui, sans-serif;
}
body { margin: 0 0 4rem 0; }
img { max-width: 100%; height: auto; }
/* grid definition */
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
outline: 0px solid red;
max-width: 60ch;
margin-inline: auto;
}
.grid > div {
outline: 0px solid blue;
}
.grid .c1 { grid-column-start: span 1; }
.grid .c2 { grid-column-start: span 2; }
.grid .c3 { grid-column-start: span 3; }
.grid .c4 { grid-column-start: span 4; }
.grid .c5 { grid-column-start: span 5; }
.grid .c6 { grid-column-start: span 6; }
/* element design */
p:first-child {
margin-top: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li + li {
border-top: 1px solid #ddd;
}
ul a {
display: block;
color: currentColor;
text-decoration: none;
padding: 0.2em 0;
}
ul a:hover {
background-color: #eee;
color: #07aaff;
}
</style>
</head>
<body>
<div class="grid">
<div class="c6">
<img src="peaches_wide.jpg" alt="" />
</div>
<div class="c2">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Imprint</a></li>
</ul>
</nav>
</div>
<div class="c4">
<p>I'm baby you probably haven't heard of them leggings woke shoreditch ascot polaroid portland glossier fam shaman. Bespoke celiac listicle, selvage flannel vinyl portland affogato mumblecore. Keffiyeh wolf letterpress aesthetic franzen man braid. Wayfarers letterpress adaptogen, godard williamsburg yr gluten-free unicorn cardigan. Hexagon chicharrones deep v big mood chillwave semiotics vice tousled kinfolk tofu sartorial cardigan intelligentsia before they sold out XOXO. Adaptogen hella man braid viral kale chips freegan ugh occupy knausgaard disrupt normcore wolf bitters.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment