CSSで段組レイアウト：固定幅＋固定幅

基本形

先ず2つのboxを用意し、両boxをdivで囲みます。

<div id="wrap">
  <div id="boxA">
    <p>boxA</p>
    <p>A A A・・・A</p>
  </div>
  <div id="boxB">
    <p>boxB</p>
    <p>B B B・・・B</p>
  </div>
</div>

#boxA {
  border: 10px solid pink;
  box-sizing: border-box;
  width: 300px;
}

#boxB {
  border: 10px solid lightblue;
  box-sizing: border-box;
  width: 300px;
}

3,9

widthがborderの太さ込みでの幅指定になります。borderがない場合は不要です。

4,10

固定幅にします。

Flexboxで2段組み

ウィンドウ幅や画面幅が広がった場合に横並びになるようにします。上記CSSに下記を加えます。

CSS変更

@media screen and (min-width:641px){
  #wrap {
    display: flex;
    flex-wrap: wrap;
  }
}

12

ブレイクポイント（縦並びと横並びの境目）で、641px以上で横並びにしています。

14

Flexboxで子要素を横並びにします。

15

子要素の幅を縮めて単一行に押し込まず、子要素の幅を保って折り返して複数行に配置します。

結果

PCでのウィンドウの横幅や、スマートフォンなどの画面幅によって、配置が変わります。

• 幅が狭いときは縦並び（上図）
• 幅が広いときは横並び（下図）

画面幅が1つのboxより狭いと横スクロールバーが現れます。

実際の様子（デモ）

実際に、PCでウィンドウ幅を変えたり、スマートフォンなどで縦横を変えてみてください。

縦線の間隔は100pxです。

固定幅＋固定幅のまとめ

段組みとしてはオーソドックスと言えますが、ページのおおまかなブロック構成で使うにはスペースのムダができてしまう場合があります。

リストに幅をつけて複数並べる場合などにいいでしょう。