컴포넌트 공방: 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공식 문서
공방 주문서
사진 여러 장을 세 칸씩 맞춰 바둑판처럼 늘어놓아 주세요.
rx.grid는 자식을 가로·세로 칸에 맞춰 바둑판처럼 놓는 상자입니다. Flex가 한 줄을 따라 늘어놓는다면, 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"을 함께 주면, 자식이 위에서 아래로 세 칸을 채운 뒤 옆 열로 넘어갑니다. 이때 열의 너비는 내용에 맞춰지므로 남는 공간이 생기고, 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로 두고 나머지를 둘째 열에 줍니다. 자식에게 CSS grid_column="span 2"를 주면 두 열을, grid_row="span 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": 빈칸 메우기
두 칸짜리 카드가 이어지면 줄 끝에 빈칸이 생깁니다. 기본 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%",
)주문서 완성
사진 여섯 장을 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
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.