Skip to content

Instantly share code, notes, and snippets.

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

Embed
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;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-ms-column-break-inside:avoid;
-o-column-break-inside:avoid;
column-break-inside:avoid;
}
<h2>Instructions</h2>
<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.
</ol>
@murtaugh

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.