Skip to content

Instantly share code, notes, and snippets.

@jasonrundell

jasonrundell/Columns.html

Created February 25, 2020 18:50
Show Gist options
  • Save jasonrundell/0cc2f27f6c16ec1dd7db482b9a606101 to your computer and use it in GitHub Desktop.
Save jasonrundell/0cc2f27f6c16ec1dd7db482b9a606101 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Columns.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="apple-touch-icon"
type="image/png"
href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"
/>
<meta name="apple-mobile-web-app-title" content="CodePen" />
<link
rel="shortcut icon"
type="image/x-icon"
href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"
/>
<link
rel="mask-icon"
type=""
href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
color="#111"
/>
<title>CodePen - Column-count</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<style>
.grid {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.group {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.group--1 {
background: lightyellow;
}
.group--2 {
background: pink;
}
.group--3 {
background: skyblue;
}
.group--4 {
background: silver;
}
.group--5 {
background: lightgreen;
}
@media (min-width: 768px) {
.grid {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 1024px) {
.grid {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="grid">
<div class="group group--1">
<h3>List 1</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="group group--2">
<h3>List 2</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="group group--3">
<h3>List 3</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="group group--4">
<h3>List 4</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="group group--5">
<h3>List 5</h3>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment