コンポーネント工房：Reflexライブラリ100
·
講座の概要
レイアウト
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
タイポグラフィ
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
フォーム
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
データ表示
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
開閉と切り替え
·
Tabs
·
Accordion
·
Segmented Control
オーバーレイ
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
動的レンダリング
·
Cond
·
Match
·
Foreach
·
Auto Scroll
メディア
·
Image
·
Audio
·
Video
表とデータグリッド
·
Table
·
Data Table
·
Data Editor
チャート
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
チャートの部品
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
ほかのチャートライブラリ
·
Plotly
·
Pyplot
HTML要素
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
そのほかの道具
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.grid公式ドキュメント
工房の注文書
写真を何枚か、3列ずつ揃えて碁盤の目のように並べてください。
rx.grid は、子を縦横のマス目に合わせて碁盤の目のように配置する箱です。Flexが1本の線に沿って並べるのに対し、Gridは行と列を同時に揃えます。columns や rows でマスの数を決めると、子が順番にマスを埋めていきます。
rx.grid(
rx.foreach(
rx.Var.range(12),
lambda i: rx.card(f"Card {i + 1}", height="10vh"),
),
columns="3",
spacing="4",
width="100%",
)プロパティを変えてみる
マスの数、横・縦の間隔、マスの中の揃え方を変えてみます。Card 2だけ背が高いので、同じ行のほかのカードで align の違いが見えます。
プロパティを変えてみる
columns
spacing_x
spacing_y
align
rx.grid(
rx.card("Card 1"),
rx.card("Card 2", height="5rem"),
rx.card("Card 3"),
rx.card("Card 4"),
rx.card("Card 5"),
rx.card("Card 6"),
rx.card("Card 7"),
columns="3",
spacing_x="3",
spacing_y="3",
align="stretch",
width="100%",
)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
columns | "1" ~ "9" またはCSS文字列（"120px 1fr"） | なし | 列の数、または列幅のテンプレート |
rows | "1" ~ "9" またはCSS文字列 | なし | 行の数、または行の高さのテンプレート |
flow | "row" "column" "dense" "row-dense" "column-dense" | "row" | 子がマスを埋める順番 |
align | "start" "center" "end" "baseline" "stretch" | "stretch" | マスの中の縦の揃え方 |
justify | "start" "center" "end" "between" | "start" | マス全体の横の揃え方。余ったスペースがあるときだけ効く |
spacing | "0" ~ "9" | なし | 行・列の間隔 |
spacing_x spacing_y | "0" ~ "9" | なし | 列の間・行の間の間隔を別々に |
as_child | True / False | False | 子要素として描画し、プロパティを合成する |
どのプロパティも rx.breakpoints(...) で画面幅ごとに違う値を指定できます。
行の数で決める
rows="3" と flow="column" を一緒に指定すると、子が上から下へ3マスを埋めてから隣の列へ移ります。このとき列の幅は中身に合わせて決まるので余ったスペースができ、justify="between" が列を両端まで広げます。
rx.grid(
rx.foreach(
rx.Var.range(12),
lambda i: rx.card(f"Card {i + 1}", height="10vh"),
),
rows="3",
flow="column",
justify="between",
spacing="4",
width="100%",
)マスの幅を直接決め、複数のマスにまたがる
columns に数字の代わりにCSSの grid-template-columns の値を入れると、列ごとに幅を決められます。"120px 1fr" は最初の列を120pxにし、残りを2番目の列に割り当てます。子にCSSの grid_column="span 2" を指定すると2列に、grid_row="span 2" を指定すると2行にまたがります。
rx.vstack(
rx.grid(
rx.card("Sidebar"),
rx.card("Content"),
columns="120px 1fr",
spacing="3",
width="100%",
),
rx.grid(
rx.card("Wide", grid_column="span 2"),
rx.card("1"),
rx.card("2"),
rx.card("3"),
rx.card("Tall", grid_row="span 2"),
rx.card("4"),
rx.card("5"),
columns="3",
spacing="3",
width="100%",
),
width="100%",
)flow="dense"：空きマスを埋める
2マス分のカードが続くと、行の終わりに空きマスができます。既定の flow="row"（左）は順番を守って空きマスを残し、flow="dense"（右）は後ろの小さなカードを前の空きマスに詰めて埋めます。
rx.flex(
rx.grid(
rx.card("A", grid_column="span 2"),
rx.card("B", grid_column="span 2"),
rx.card("C"),
rx.card("D"),
columns="3",
flow="row",
spacing="2",
width="45%",
),
rx.grid(
rx.card("A", grid_column="span 2"),
rx.card("B", grid_column="span 2"),
rx.card("C"),
rx.card("D"),
columns="3",
flow="dense",
spacing="2",
width="45%",
),
justify="between",
width="100%",
)画面幅ごとに列の数を変える
columns=rx.breakpoints(...) で、狭い画面では1列、xs（520px）以上は2列、md（1024px）以上は3列に切り替えます。ブラウザのウィンドウ幅を変えてみてください。
rx.grid(
rx.foreach(rx.Var.range(6), lambda i: rx.card(f"Card {i + 1}")),
columns=rx.breakpoints(initial="1", xs="2", md="3"),
spacing="3",
width="100%",
)注文書を仕上げる
6枚の写真を columns="3" で並べ、画像ごとに width="100%" でマスを埋めるようにします。マスの幅が同じなので、写真の大きさもきれいに揃います。
rx.grid(
*[
rx.image(
src=f"https://picsum.photos/id/{n}/300/300",
width="100%",
height="auto",
border_radius="6px",
)
for n in [10, 11, 12, 13, 14, 15]
],
columns="3",
spacing="2",
width="100%",
max_width="420px",
)工房ノート
rx.gridは行と列を同時に揃える。columnsかrowsでマスの数を決める。
columnsには"1"~"9"や"120px 1fr"のようなCSSテンプレート文字列を入れられる。
spacing（全体）、spacing_x（列の間）、spacing_y（行の間）で間隔をとる。
flowで埋める順番を、子のgrid_column="span 2"で複数マスへのまたがりを決める。
columns=rx.breakpoints(initial="1", md="3")のように画面幅ごとに列の数を変える。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。