A Pen by Mike North on CodePen.
Created
July 6, 2015 18:33
-
-
Save mike-north/9098b37c2adf6fc8bb3c to your computer and use it in GitHub Desktop.
MaterializeCSS Multi-Column Card Flow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="row"> | |
<div class="col s12"> | |
<h2 class='text-center'>Multi-column <a href="http://materializecss.com">MaterializeCSS</a> card flow</h2> | |
<h4 class='text-center grey-text lighten-3'> | |
By <a href="https://twitter.com/michaellnorth">@MichaelLNorth</a> | |
</h4> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col s12 cards-container"> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
<p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
<p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
<p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
<p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
<div class="card blue-grey darken-1"> | |
<div class="card-content white-text"> | |
<span class="card-title">Card Title</span> | |
<p>I am a very simple card. I am good at containing small bits of information. | |
I am convenient because I require little markup to use effectively.</p> | |
</div> | |
<div class="card-action"> | |
<a href="#">This is a link</a> | |
<a href="#">This is a link</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Media Query Ranges | |
$small-screen-up: 601px !default; | |
$medium-screen-up: 993px !default; | |
$large-screen-up: 1201px !default; | |
$small-screen: 600px !default; | |
$medium-screen: 992px !default; | |
$large-screen: 1200px !default; | |
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; | |
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; | |
$small-and-down: "only screen and (max-width : #{$small-screen})" !default; | |
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; | |
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; | |
@mixin column-count($ct) { | |
-webkit-column-count: $ct; | |
-moz-column-count: $ct; | |
column-count: $ct; | |
} | |
.cards-container { | |
column-break-inside: avoid; | |
.card { | |
display: inline-block; | |
overflow: visible; | |
} | |
} | |
@media #{$small-and-down} { | |
.cards-container { | |
@include column-count(1); | |
} | |
} | |
@media #{$medium-and-up} { | |
.cards-container { | |
@include column-count(2); | |
} | |
} | |
@media #{$large-and-up} { | |
.cards-container { | |
@include column-count(3); | |
} | |
} | |
/// Styles for demo | |
.text-center { | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment