Rows, at three widths

Every row below sits at a fixed viewport. Only the box around it changes, and the column count follows the box — which is the whole difference between this and a breakpoint.

mk-row--2up

At most 2 per line, and fewer whenever a column would fall below the readable floor. Nothing below is measuring the viewport — only the box each row sits in.

100% — the full container
1
2
3
4
5
6
7
8
60% — a main column
1
2
3
4
5
6
7
8
30% — an aside
1
2
3
4
5
6
7
8

mk-row--3up

At most 3 per line, and fewer whenever a column would fall below the readable floor. Nothing below is measuring the viewport — only the box each row sits in.

100% — the full container
1
2
3
4
5
6
7
8
60% — a main column
1
2
3
4
5
6
7
8
30% — an aside
1
2
3
4
5
6
7
8

mk-row--4up

At most 4 per line, and fewer whenever a column would fall below the readable floor. Nothing below is measuring the viewport — only the box each row sits in.

100% — the full container
1
2
3
4
5
6
7
8
60% — a main column
1
2
3
4
5
6
7
8
30% — an aside
1
2
3
4
5
6
7
8

mk-row--5up

At most 5 per line, and fewer whenever a column would fall below the readable floor. Nothing below is measuring the viewport — only the box each row sits in.

100% — the full container
1
2
3
4
5
6
7
8
60% — a main column
1
2
3
4
5
6
7
8
30% — an aside
1
2
3
4
5
6
7
8

mk-row--6up

At most 6 per line, and fewer whenever a column would fall below the readable floor. Nothing below is measuring the viewport — only the box each row sits in.

100% — the full container
1
2
3
4
5
6
7
8
60% — a main column
1
2
3
4
5
6
7
8
30% — an aside
1
2
3
4
5
6
7
8

mk-row, stacked

The same six cells written two ways. The gap between the lines is the row's own gutter either way, so an author choosing one row or two changes nothing a reader can see.

one 3up row, six cells — it wraps

1
2
3
4
5
6

two 3up rows, three cells each

1
2
3
4
5
6

mk-row--aside-left

70/30 where there is room, stacked where there is not. The threshold is each side's own floor, not a breakpoint.

100% — the full container
1
2
60% — a main column
1
2
30% — an aside
1
2

mk-row--aside-right

70/30 where there is room, stacked where there is not. The threshold is each side's own floor, not a breakpoint.

100% — the full container
1
2
60% — a main column
1
2
30% — an aside
1
2

mk-row--weighted-left

55/45 by default where there is room, stacked where there is not. The threshold is each side's own floor, not a breakpoint.

100% — the full container
1
2
60% — a main column
1
2
30% — an aside
1
2

mk-row--weighted-right

55/45 by default where there is room, stacked where there is not. The threshold is each side's own floor, not a breakpoint.

100% — the full container
1
2
60% — a main column
1
2
30% — an aside
1
2