Skip to content

Instantly share code, notes, and snippets.

@oelna
Created October 7, 2022 13:19
Embed
What would you like to do?
A very basic implementation of a six column grid in HTML and CSS
<!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