WordPress│クラシックエディタでも使えるカラムを作成する方法

<div class="column-container">
<div class="column">内容1</div>
<div class="column">内容2</div>
<div class="column">内容3</div>
<div class="column">内容4</div>
<div class="column">内容5</div>
<div class="column">内容6</div>
<!-- 必要に応じてさらにカラムを追加 -->
</div>

:root {
    --columns-default: 1; /* デフォルトのカラム数 */
    --columns-medium: 2; /* 600px以上でのカラム数 */
    --columns-large: 3; /* 960px以上でのカラム数 */
    --gap-value: 10px; /* 間隔 */
}

.column-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap-value);
}

.column-container .column {
    flex: 0 0 calc(100% / var(--columns-default) - var(--gap-value));
    box-sizing: border-box;
    border: 1px solid #ccc; /* 枠線 */
    padding: 10px;
    text-align: center;
}

@media (min-width: 600px) {
    .column-container .column {
        flex: 0 0 calc(100% / var(--columns-medium) - var(--gap-value));
    }
}

@media (min-width: 960px) {
    .column-container .column {
        flex: 0 0 calc(100% / var(--columns-large) - (var(--columns-large) - 1) * var(--gap-value) / var(--columns-large));
    }
}

<div class="grid-column-container">
<div class="column">内容1</div>
<div class="column">内容2</div>
<div class="column">内容3</div>
<div class="column">内容4</div>
<div class="column">内容5</div>
<div class="column">内容6</div>
<!-- 必要に応じてさらにカラムを追加 -->
</div>

.grid-column-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px
}

.grid-column-container .column {
    box-sizing: border-box;
    border: 1px solid #ccc; /* 枠線 */
    padding: 10px;
    text-align: center;
}