Skip to content

Instantly share code, notes, and snippets.

@murtaugh murtaugh/columns.css
Created Sep 16, 2013

What would you like to do?
CSS Columns
.columns {
display: block;
list-style-type: none;
margin-bottom: 24px;
-moz-column-count: 2;
-moz-column-gap: 24px;
-webkit-column-count: 2;
-webkit-column-gap: 24px;
column-count: 2;
column-gap: 24px;
.recipe-holder .columns li {
margin-bottom: 12px;
<ol class="columns">
<li>In a small bowl, combine orange juice, cilantro, lime juice, oil, garlic, cumin, salt and pepper; remove 1/2 cup and place in a large zip-close plastic bag. Add chicken to bag and turn to coat; seal bag and refrigerate up to 12 hours. 
<li>Meanwhile, to make salsa, add beans, mango and onion to bowl with orange juice mixture; toss, cover and refrigerate up to 12 hours. 
<li>When ready to cook, coat grill or grill pan with cooking spray; preheat over medium-high heat. Remove chicken from marinade; discard marinade.
<li>Grill chicken, turning as needed, until cooked through, about 15 to 20 minutes.

This comment has been minimized.

Copy link
Owner Author

murtaugh commented Sep 16, 2013

The CSS assumes you don't want individual elements to break across columns. If this isn't a concern, remove all the column-break-inside declarations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.