fac卡片网格灵活控制宽高

实现效果如下

相关依赖

dash==3.2.0
feffery_antd_components==0.4.2
feffery_dash_utils==0.2.6

实现代码

import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdCard(
            [
                fac.AntdCardGrid("网格1", style=style(width="calc(100% / 3)")),
                fac.AntdCardGrid(
                    "网格2", style=style(width="calc(2 * calc(100% / 3))")
                ),
                *[
                    fac.AntdCardGrid(
                        f"网格{3 + i}", style=style(width="calc(100% / 7)")
                    )
                    for i in range(7)
                ],
                *[
                    fac.AntdCardGrid(
                        f"网格{10 + i}", style=style(width="calc(100% / 5)", height=150)
                    )
                    for i in range(5)
                ],
            ],
            title="卡片网格示例",
        )
    ],
    style=style(padding=50),
)

if __name__ == "__main__":
    app.run(debug=True)