パーツ（フレックスボックス・カラム）

<div class="flex-container">
<div class="item w150">ボックス１の内容...</div>
<div class="item w150">ボックス２の内容...</div>
<div class="item w150">ボックス３の内容...</div>
<div class="item w200">ボックス4の内容...</div>
<div class="item w250">ボックス5の内容...</div>
<div class="item w300">ボックス6の内容...</div>
<div class="item w350">ボックス7の内容...</div>
</div>

/* 親要素：スッキリしました */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 0.8em; /* 要素間の余白を一括管理 */
border: 1px solid #ddd;
padding: 0.8em;
margin-bottom: 2em;
}

/* 子要素の共通スタイル：ここにまとめる！ */
.flex-container > .item {
background: #f4f4f4;
padding: 1em;
flex-grow: 1; /* 伸びる設定 */
flex-shrink: 0; /* 縮ませない設定 */
}

/* 個別のベース幅だけを指定 */
.w150 { flex-basis: 150px; }
.w200 { flex-basis: 200px; }
.w250 { flex-basis: 250px; }
.w300 { flex-basis: 300px; }
.w350 { flex-basis: 350px; }

<div class="multicol">
３カラム内容。ここにテキストを流し込むと、PCでは3列、タブレットでは2列、スマホでは1列に自動で切り替わります。３カラム内容 ３カラム内容 ３カラム内容 ３カラム内容 ３カラム内容　３カラム内容 ３カラム内容 ３カラム内容 ３カラム内容 ３カラム内容
</div>
<div class="multicol2">
２カラム内容。PC・タブレットでは2列、スマホでは1列に切り替わります。　２カラム内容 ２カラム内容 ２カラム内容 ２カラム内容 ２カラム内容　２カラム内容 　２カラム内容 ２カラム内容 ２カラム内容 ２カラム内容
</div>

/* --- マルチカラム（段組み）共通設定 --- */
.multicol,
.multicol2 {
column-gap: 30px;
margin: 1em;
padding: 1em;
column-fill: balance;
column-rule: 1px solid #8e5ff1;
/* ベンダープレフィックス（-webkit-等）は現在のブラウザでは不要なため削除しました */
}

/* PCサイズでの初期列数 */
.multicol {
column-count: 3;
}

.multicol2 {
column-count: 2;
}

/* --- レスポンシブ対応 --- */

/* 中画面（1080px以下）：3カラムを2カラムに落とす */
@media (max-width: 1080px) {
.multicol {
column-count: 2;
column-gap: 50px; /* ここだけ元の指定通り50pxにしています */
}
}

/* 小画面（768px以下）：すべて1カラム（1列）にする */
@media (max-width: 768px) {
.multicol,
.multicol2 {
column-count: 1;
}
}