今回の要件は　段組み有の帳票作成です。
ざっとこんなイメージ。

スタイルシートにcolumn-count と column-width を使ってみましたが、機能しませんね。たぶんこの設定は新しいからだと納得しました。
VF Pageで使えるスタイルシートは古い命令だけなんですな。

段組みレイアウトの使用

2022/08/09追加　こんな感じでできました。背景色はデバック用につけてます。本番では色はありませんよ。

以下の設定ではどうだろうか？

文字を１行しか書いてないので分かりにくいですが、なんとなくイメージ通りの配置ができてそうです。

コードはこんな感じです。ちょっとレイアウトとは違うロジックも混在しているのでややこしい。
ある選択肢に応じて２種類の帳票を出しわけないといけないため、style="{!p.test1};とstyle="{!p.test2};を使って表示するかしないかの制御を行っています。
それぞれの変数にはtest1 = 'display:none;';あるいは test2 = 'display:block;';　をセットすることで片一方を非表示にします。

<style>
      * {font-family: Arial Unicode MS; margin:0; padding:0; font-size:15px; box-sizing: border-box;}
        @page {size: A4; margin:0; padding:0;}
        .page {position: relative; page-break-before:always; height: 296mm; width: 210mm; overflow: hidden;}
         #col1{margin:0; padding:10; width:49%;display:inline-block; }
         #col2{margin:0; padding:50; width:49%;display:inline-block; background-color: blue;} 
         #col3{margin:0; padding:0; width:100%; background-color: red;} 
        
         #col4{margin:0; padding:10; width:49%;display:inline-block; }
         #col5{margin:0; padding:50; width:49%;display:inline-block; background-color: red;} 
         #col6{margin:0; padding:0; width:100%; background-color: blue;} 
    </style>
  </head>
  <body>
    <apex:outputtext value="{!errorMessage}" rendered="{!NOT(ISBLANK(errorMessage))}" />
        
      <apex:repeat var="p" value="{!pages}">
          <div class="page" style="{!p.test1};">
              <apex:include pageName="PdfGrid" rendered="{!isGrid}"/>
              
              <div id="col1" >
                  xxxxx
              </div>
              <div id="col2" >
                 yyyyy
              </div>                          
              <div id="col3">
                 zzzzzz
              </div>    
              
          </div><!-- Page 1 -->
          <div class="page" style="{!p.test2};">
              <apex:include pageName="PdfGrid" rendered="{!isGrid}"/>
              
              <div id="col4">
                  xxxxx
              </div>
              <div id="col5">
                 yyyyy
              </div>                          
              <div id="col6">
                 ああああ
              </div>    
          </div>
      
	</apex:repeat> <!-- pages -->

ブランクを入れたい。これも困った

【&nbsp;】：半角スペースと同じサイズの空白　←　これは全然あかん。
【&thinsp;】：&nbsp;の空白より小さい空白
【&ensp;】：半角スペースより間隔がやや広い空白
【&emsp;】：全角スペースとほぼ同じサイズの空白 ←　これが有効でした。

画像の上に文字を重ねたいらしい