Zones

Zones

The two-pane workspace every explorer, editor and detail view is built on. A zone carries no width and no height of its own: the split it sits in is what sizes it, and each side scrolls alone. Two zones are two objects laid on the page, not one panel cut in half — what tells them apart is the room between them, and `zone--panel` is the ground each one stands on.

A split

One column sized, the other taking what is left. The size is given by a step, and it is the zone's own — it is not inherited by anything nested inside it.
zone--narrow zone--size-6
zone

This side takes whatever the sized column leaves.

Each side scrolls alone

A scrollable zone is what holds the overflow, not the page. Scroll one of these two and the other stays where it is, which is the whole reason for the shape.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Line 15

Line 16

Line 17

Line 18

Line 19

Line 20

Line 21

Line 22

Line 23

Line 24

Line 25

Line 26

Line 27

Line 28

Line 29

Line 30

A header that does not scroll

A split turned vertical: a narrow zone is the height of what it holds, the body takes the rest and scrolls under it. This is the arrangement of a panel with a toolbar on top.
zone--narrow

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Line 15

Line 16

Line 17

Line 18

Line 19

Line 20

Line 21

Line 22

Line 23

Line 24

Line 25

Line 26

Line 27

Line 28

Line 29

Line 30

Below a floor

Given a floor, the flexible zone claims a full line and the sized column moves above it instead of both being squeezed to nothing. Narrow the window to see it fold.
zone--narrow
zone

Below the floor this zone is given, it takes a line of its own.

As wide as its content

`zone--fit-content`: the region takes the width of what it holds — a table of many columns — rather than what is left to it. The row overflows and scrolls sideways as one, its scrollbar at the foot of the frame, not under the table alone; each region still scrolls down on its own.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

zone--fit-content
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg

Beside a page

`zone--portrait`: never narrower than a portrait page (3:4) as tall as the row. Widened by hand, the text keeps its width and the row scrolls sideways instead of squeezing the page.
zone--measure (--zone-size: 48rem)

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

v1.0.29