Skip to content

Instantly share code, notes, and snippets.

@DanCanetti
Created January 18, 2021 16:07
Show Gist options
  • Save DanCanetti/65e2981b8cc80fa587001fe2c919811e to your computer and use it in GitHub Desktop.
Save DanCanetti/65e2981b8cc80fa587001fe2c919811e to your computer and use it in GitHub Desktop.
CSS Columns
<ul class="column-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
// Mixins
$screen-sm: 776px;
@mixin sm {
@media (min-width: #{$screen-sm}) {
@content;
}
}
// List
.column-list {
list-style: none;
max-width: 750px;
margin: 50px auto auto;
width: 100%;
// Create columns
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
li {
text-transform: uppercase;
font-size: 18px;
margin-bottom: 20px;
// Safari alignment fix
display: inline-block;
width: 100%;
}
@include sm {
// Create columns
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment