Markdown 多列布局

一、CSS 排版布局¶

一套样式实现多列布局，根据内容结构自适应列数和列宽。

参考文档：

如果编辑器不支持多列布局渲染，则可导出 HTML 就正常显示了。

1. 使用 flex 弹性盒¶

Flexbox 用于创建横向或纵向的一维页面布局。参考 MDN Docs - Flexbox。

根据内容自适应列数：

<style>
.container-flex {
    display: flex;
    text-align: left;
    gap: 2vw;
}
.flex-col {
    flex: 1;  /* 无单位的比例值，表示每个元素占用空间都相等 */
}
</style>

<div class="container-flex">
    <div class="flex-col">Column 1 Content</div>
    <div class="flex-col">Column 2 Content</div>
    <div class="flex-col">Column 3 Content</div>
</div>

第一组：3 列

第1列
- Bullet
Bullet
Bullet

第2列
1. List
List
List

第二组：2 列

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.

Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.

2. 使用 grid 网格¶

Grid 用于同时在两个维度上把元素按行和列排列整齐。参考 MDN Docs - Grids。

根据内容自适应列数：

<style>
.container-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2vw;
    margin-bottom: var(--content-padding-bottom);
    text-align: left;
}
</style>

<div class="container-grid">
    <div>Column 1 Content</div>
    <div>Column 2 Content</div>
    <div>Column 3 Content</div>
</div>

第一组：3 列

第1列
- Bullet
Bullet
Bullet

第2列
1. List
List
List

第二组：2 列

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.

Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.

3. 指定列数(column-count)¶

俗称「多列布局」或「多栏布局」，根据列数自动连续填充内容。参考 MDN Docs - MultipleColumn。

<style>
.container-multi {
   /* column-count: number|auto; */    
    column-count: 3;    /* 指定列数 */
    column-width: 10em; /* 指定最小宽度 */
    column-gap: 2%;     /* 指定列间隙 */
    text-align: left;
}
</style>

<div class="container-multi">
    <div>Column 1 Content</div>
    <div>Column 2 Content</div>
    <div>Column 3 Content</div>
</div>

第一组：CSS 指定 3 列，给 3 列数据，缩小屏幕尺寸看看

第1列
- Bullet
Bullet
Bullet

第2列
1. List
List
List

第二组：CSS 指定 3 列，但只给 2 列数据，会怎样？

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.

Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.

4. 使用 float 浮动¶

Float 布局，把一个元素浮动起来，其他的内容会环绕在此元素周围。参考 MDN Docs - Floats。

<style>
.float-box {
    float: left;
    margin-top: 5px;
    margin-right: 20px;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
    color: black;
}
</style>

<div class="float-box">浮块</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metusut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet, quod fere cotidianis proeliis.

Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit ametorci vel, viverra egestas ligula. Curabitur vehicula tellus neque, acornareex malesuada et.

浮块

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metusut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet, quod fere cotidianis proeliis. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit ametorci vel, viverra egestas ligula. Curabitur vehicula tellus neque, acornareex malesuada et.

5. 使用 table 表格¶

Table 布局，通常被认为是「过时」的，但对老旧设备具有最好的兼容性，通常也是最简单的解决方案。

根据内容自适应列数：

<style>
.container-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: left;
    .table-col {
        display: table-cell;
        vertical-align: top;
        width: 50%;
        padding: 2% 0 2% 3%;
        &:first-of-type { padding-left: 0; }
    }
}
</style>

<div class="container-table">
    <div class="table-col">
        Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
    </div>
    <div class="table-col">
        Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt.
    </div>
</div>

第一组：3 列

第1列
- Bullet
Bullet
Bullet

第2列
1. List
List
List

第二组：2 列

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.

Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt.

二、在线体验¶

三、AI 生成¶

Prompt¶

写一段多列布局的CSS代码，要求：
1. 根据子元素的结构自动判定列数，不要显式定义列数；
2. 根据可用空间平均分配列宽；
3. 写法尽量精简高效；

Write a CSS code for a multi-column layout that requires:
1. Determine the number of columns automatically based on the structure of the child elements; do not explicitly define the number of columns;
2. Distribute column widths evenly based on available space;
3. The writing style is as streamlined and efficient as possible;

选择工具¶

v0.dev 生成的：v0dev-multiColumn；
ChatGPT-4o 生成的核心代码跟 v0.dev 一模一样；
Claude 3.5 生成的包含 Grid、Flex、Column 的示范： claude-multiColumn；

小结¶

如果是想多列布局，一般使用 grid 或 flex 即可；
如果要考虑全面的兼容性，则可补充上面的 table 案例；
如果是要环绕排版，则用 float；
指定列数 column-count，貌似只适合流式布局。我是要实现根据内容自适应列数，这家伙是反过来的；

Grid 管理大布局，Flexbox 管理细节中的一维布局，两者可以混合使用，这也是现代前端开发的常见做法！