A demonstration of the W3C Candidate Recommendation CSS Multi-column Layout Module. Viewing on a new page allows columns to adjust in a fluid sense, inviting opportunities for implementation in a responsive layout.
Last active
January 4, 2016 06:19
-
-
Save rgdonohue/8581627 to your computer and use it in GitHub Desktop.
CSS Multi-column Layout
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Multi-column Layout</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| color: #666; | |
| } | |
| h1{ | |
| font-weight: normal; | |
| } | |
| #wrapper { | |
| max-width: 90%; | |
| margin: 20px auto; | |
| padding: 10px 15px 20px; | |
| background: white; | |
| } | |
| .columns { | |
| -moz-columns:12em; | |
| -webkit-columns:12em; | |
| columns:12em; | |
| -moz-column-gap: 4em; | |
| -webkit-column-gap: 4em; | |
| column-gap: 4em; | |
| -moz-column-rule: 1px dashed #dadada; | |
| -webkit-column-rule: 1px dashed #dadada; | |
| column-rule: 1px dashed #dadada; | |
| } | |
| p { | |
| margin: 0 0 15px 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <h1>Another bacon story</h1> | |
| <section class="columns"> | |
| <p>Bacon ipsum dolor sit amet meatball filet mignon shoulder, tenderloin kevin shankle pork tri-tip spare ribs chuck leberkas porchetta frankfurter tail corned beef. Biltong bresaola tri-tip fatback cow pancetta. Jerky ball tip biltong short ribs shankle filet mignon venison bacon kielbasa rump. Rump drumstick flank short ribs, turducken ham hock t-bone turkey pork loin. Ham rump short ribs capicola shank. Flank boudin biltong rump swine ground round tongue tri-tip short ribs capicola tenderloin pig beef ribs. Shankle short loin ham swine prosciutto turducken.</p> | |
| <p>Salami beef rump chuck swine. Turducken pancetta pork prosciutto sausage jerky, doner kevin t-bone brisket pastrami rump ball tip biltong. Pancetta tail pig capicola pork loin, turducken tri-tip. Turducken chuck salami boudin meatball leberkas turkey.</p> | |
| <p>Filet mignon boudin bacon sausage beef, turkey strip steak. Brisket pig hamburger short loin doner shank turducken bacon turkey andouille beef ribs landjaeger jowl sirloin ribeye. Doner andouille boudin, t-bone bacon tenderloin swine jerky. Flank meatloaf strip steak leberkas tail pork chop jowl pork loin beef frankfurter. Ground round prosciutto strip steak, pork loin bacon spare ribs bresaola tri-tip fatback jerky biltong shankle brisket. Ground round brisket bacon drumstick jerky shoulder.</p> | |
| <p>Kevin capicola tri-tip ball tip, spare ribs pork chop tenderloin frankfurter meatball short ribs sausage fatback shankle corned beef. Brisket venison pastrami kevin capicola t-bone turkey filet mignon. Swine biltong pancetta turkey, fatback hamburger meatball. Pig bacon doner ham hock, ham pastrami kevin biltong tenderloin.</p> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment