core/columns + core/column

placeholder for updating page

Columns: full width – column gaps – stack on mobile

2fr

1fr

2fr

1fr

Columns: background image – elevation

2fr

1fr

2fr

Background image on full-width columns

Background image on boxed columns, no elevation

Background image on boxed columns, low elevation

Background image on boxed columns, normal elevation

Background image on boxed columns, high elevation

Column: content spacing

Without content spacing

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

With content spacing

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Column(s): margins – paddings

1fr

Column(s): align – equal hight

1fr

Column(s): grid – color

1fr

2fr

1fr

3fr

1fr

2fr

1fr

2fr

1fr

2fr

1fr

2fr

1fr

2fr

3fr

1fr

2fr

1fr

2fr

1fr

2fr

1fr

2fr

1fr

2fr

1fr

2fr

3fr

4fr

1fr

2fr

1fr

2fr

1fr

2fr

1fr

2fr

3fr

4fr

5fr

1fr

2fr

3fr

4fr

5fr

6fr

Examples

Column 100% with row background

Column 50% with background

Column 33% with background

Column 25% with background

Columns 100%

Nested columns 50%

Nested columns 33%

Nested columns 50%

Nested columns 33%

column 16%

4fr

3fr

2fr

1fr

2fr

1fr

2fr

1fr

–

2fr

–

1fr

2fr

–

1fr

–

3fr

–

1fr

custom background image row

custom background image column