Column

<main class="main-wrapper">
    <div class="column-box">
        <p class="paragraph">
            恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
        </p>
        <p class="paragraph">
            自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。
        </p>
        <p class="paragraph">
            しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。
        </p>
        <p class="paragraph">
            また、自分は子供の頃、絵本で地下鉄道というものを見て、これもやはり、実利的な必要から案出せられたものではなく、地上の車に乗るよりは、地下の車に乗ったほうが風がわりで面白い遊びだから、とばかり思っていました。
        </p>
    </div>
</main>
<main class="main-wrapper">
  <div class="column-box">
    <p class="paragraph">
      恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
    </p>
    <p class="paragraph">
      自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。
    </p>
    <p class="paragraph">
      しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。
    </p>
    <p class="paragraph">
      また、自分は子供の頃、絵本で地下鉄道というものを見て、これもやはり、実利的な必要から案出せられたものではなく、地上の車に乗るよりは、地下の車に乗ったほうが風がわりで面白い遊びだから、とばかり思っていました。
    </p>
  </div>
</main>
/* No context defined. */
  • Content:
    .column-box {
      column-gap: 3rem;
      column-rule: solid 1px;
      margin: auto;
    }
    @media print, screen and (min-width: 37.5625em) {
      .column-box {
        columns: 2 auto;
      }
    }
    @media print, screen and (max-width: 37.5em) {
      .column-box {
        columns: 1 auto;
      }
    }
    @media print, screen and (min-width:64.0625em) {
      .column-box {
        columns: 3 auto;
      }
    }
    @media print, screen and (min-width:48em) and (max-width:64em) {
      .column-box {
        columns: 2 auto;
      }
    }
    .column-box .paragraph {
      line-height: 1.8;
    }
    .column-box .paragraph:not(:first-of-type) {
      margin-top: 1.2rem;
    }
  • URL: /components/raw/column/style.css
  • Filesystem Path: src/components/6-layout/column/style.css
  • Size: 576 Bytes

No notes defined.