Skip to content

Instantly share code, notes, and snippets.

@ddallala

ddallala/index.html

Created February 28, 2018 03:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ddallala/7ebb77ffb68974c4ab111dadfe1a7c89 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ddallala/7ebb77ffb68974c4ab111dadfe1a7c89 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/cavimo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
[short] {
grid-row: span 1;
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
<script id="jsbin-source-css" type="text/css">grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
[short] {
grid-row: span 1;
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
</script>
</body>
</html>
Raw
jsbin.cavimo.css
grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
[short] {
grid-row: span 1;
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment