Column Count Layout

column-count-layout.markdown

Column Count Layout

A Pen by Stephanie on CodePen.

License.

index.html

<div class="container">
  <h1>Column Count Layout</h1>
  <p class="text">Donut wafer cupcake icing bonbon cheesecake dessert muffin chocolate cake. Dessert tart dragée marshmallow carrot cake. Donut sweet roll chocolate bar brownie sesame snaps. Oat cake bonbon jelly beans gingerbread lemon drops. Bear claw chocolate bar jelly-o sesame snaps biscuit pastry dragée. Chupa chups jelly beans icing lollipop jelly-o sweet sugar plum apple pie. Chocolate bar sesame snaps bonbon. Dragée candy halvah bonbon apple pie gummi bears muffin chocolate bar gingerbread. Pie cake oat cake cupcake gingerbread. Pastry croissant powder dragée. Sesame snaps muffin gummies halvah chocolate cake gummi bears. Jujubes gummi bears caramels lollipop chupa chups soufflé fruitcake. Jujubes croissant candy canes. Pastry halvah liquorice.</p>
</div>

style.scss

@import url('https://fonts.googleapis.com/css?family=Arvo');

$bg: #CC444B;
$font-color: #E4B1AB;

body,
html {
  background: $bg;
  font-family: "Arvo", sans-serif;
  line-height: 1.6;
  color: $font-color;
}

.container {
  margin: 35px auto;
  width: 90%;
}

h1 {
  font-size: 1.8em;
}

.text {
  font-size: 1em;
  column-count: 2;
  column-gap: 40px;
}