Skip to content

Commit 738b8e8

Browse files
dangreendangreen
committed
docs: add docs for SpannedMasonryGrid
1 parent bd8cb44 commit 738b8e8

File tree

8 files changed

+280
-49
lines changed

8 files changed

+280
-49
lines changed

‎website/src/content/docs/api/preact.mdx‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ sidebar:
55
order: 3
66
---
77

8-
## MasonryGrid
8+
## RegularMasonryGrid
99

1010
Standard masonry layout that stacks items by pulling them up to fill gaps.
1111

1212
```tsx
13-
import { MasonryGrid, Frame } from '@masonry-grid/preact'
13+
import { RegularMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/preact'
1414

1515
<MasonryGrid
1616
frameWidth={200}
@@ -36,22 +36,22 @@ import { MasonryGrid, Frame } from '@masonry-grid/preact'
3636
Balanced masonry layout that reorders items inside rows to minimize overall grid height.
3737

3838
```tsx
39-
import { BalancedMasonryGrid, Frame } from '@masonry-grid/preact'
39+
import { BalancedMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/preact'
4040

41-
<BalancedMasonryGrid
41+
<MasonryGrid
4242
frameWidth={200}
4343
gap={10}
4444
>
4545
<Frame width={4} height={3}>
4646
<img src='...' />
4747
</Frame>
4848
{/* more frames... */}
49-
</BalancedMasonryGrid>
49+
</MasonryGrid>
5050
```
5151

5252
### Props
5353

54-
Same as `MasonryGrid`.
54+
Same as `RegularMasonryGrid`.
5555

5656
## Frame
5757

@@ -76,17 +76,64 @@ import { Frame } from '@masonry-grid/preact'
7676
- `as?: ElementType` - Render as a different element (default: `'div'`).
7777
- All other HTML attributes are passed through.
7878

79+
## SpannedMasonryGrid
80+
81+
Experemental CSS-only masonry layout that uses `grid-row: span x` to create masonry effect.
82+
83+
```tsx
84+
import { SpannedMasonryGrid as MasonryGrid, SpannedFrame as Frame } from '@masonry-grid/preact'
85+
86+
<MasonryGrid
87+
frameWidth={200}
88+
gap={10}
89+
>
90+
<Frame width={4} height={3}>
91+
<img src='...' />
92+
</Frame>
93+
{/* more frames... */}
94+
</MasonryGrid>
95+
```
96+
97+
### Props
98+
99+
Same as `RegularMasonryGrid`, with an additional props:
100+
101+
- `precision?: number` - Precision for span calculation (default: `10`). Affects how accurately frames will maintain their aspect ratios. Higher precision results in more accurate sizes but may impact performance and cause bugs in some browsers.
102+
- `innerStyle?: CSSProperties` - Additional styles applied to the inner container that holds the frames.
103+
104+
## SpannedFrame
105+
106+
Component for defining spanned masonry grid item with aspect ratio.
107+
108+
```tsx
109+
import { SpannedFrame as Frame } from '@masonry-grid/preact'
110+
111+
<Frame
112+
width={16}
113+
height={9}
114+
as='li'
115+
>
116+
<img src='...' />
117+
</Frame>
118+
```
119+
120+
### Props
121+
122+
Same as `Frame`, with an additional prop:
123+
124+
- `innerStyle?: CSSProperties` - Additional styles applied to the inner container that holds the content.
125+
79126
## useMasonryGrid
80127

81128
Hook for advanced use cases when you need direct access to the masonry grid instance.
82129

83130
```tsx
84131
import { useMasonryGrid } from '@masonry-grid/preact'
85-
import { MasonryGrid as VanillaMasonryGrid } from '@masonry-grid/vanilla'
132+
import { RegularMasonryGrid } from '@masonry-grid/vanilla'
86133

87134
function CustomGrid() {
88135
const containerRef = useMasonryGrid<HTMLDivElement>({
89-
type: VanillaMasonryGrid
136+
type: RegularMasonryGrid
90137
})
91138

92139
return (

‎website/src/content/docs/api/react.mdx‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ sidebar:
55
order: 2
66
---
77

8-
## MasonryGrid
8+
## RegularMasonryGrid
99

1010
Standard masonry layout that stacks items by pulling them up to fill gaps.
1111

1212
```tsx
13-
import { MasonryGrid, Frame } from '@masonry-grid/react'
13+
import { RegularMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/react'
1414

1515
<MasonryGrid
1616
frameWidth={200}
@@ -36,22 +36,22 @@ import { MasonryGrid, Frame } from '@masonry-grid/react'
3636
Balanced masonry layout that reorders items inside rows to minimize overall grid height.
3737

3838
```tsx
39-
import { BalancedMasonryGrid, Frame } from '@masonry-grid/react'
39+
import { BalancedMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/react'
4040

41-
<BalancedMasonryGrid
41+
<MasonryGrid
4242
frameWidth={200}
4343
gap={10}
4444
>
4545
<Frame width={4} height={3}>
4646
<img src='...' />
4747
</Frame>
4848
{/* more frames... */}
49-
</BalancedMasonryGrid>
49+
</MasonryGrid>
5050
```
5151

5252
### Props
5353

54-
Same as `MasonryGrid`.
54+
Same as `RegularMasonryGrid`.
5555

5656
## Frame
5757

@@ -76,17 +76,64 @@ import { Frame } from '@masonry-grid/react'
7676
- `as?: ElementType` - Render as a different element (default: `'div'`).
7777
- All other HTML attributes are passed through.
7878

79+
## SpannedMasonryGrid
80+
81+
Experemental CSS-only masonry layout that uses `grid-row: span x` to create masonry effect.
82+
83+
```tsx
84+
import { SpannedMasonryGrid as MasonryGrid, SpannedFrame as Frame } from '@masonry-grid/react'
85+
86+
<MasonryGrid
87+
frameWidth={200}
88+
gap={10}
89+
>
90+
<Frame width={4} height={3}>
91+
<img src='...' />
92+
</Frame>
93+
{/* more frames... */}
94+
</MasonryGrid>
95+
```
96+
97+
### Props
98+
99+
Same as `RegularMasonryGrid`, with an additional props:
100+
101+
- `precision?: number` - Precision for span calculation (default: `10`). Affects how accurately frames will maintain their aspect ratios. Higher precision results in more accurate sizes but may impact performance and cause bugs in some browsers.
102+
- `innerStyle?: CSSProperties` - Additional styles applied to the inner container that holds the frames.
103+
104+
## SpannedFrame
105+
106+
Component for defining spanned masonry grid item with aspect ratio.
107+
108+
```tsx
109+
import { SpannedFrame as Frame } from '@masonry-grid/react'
110+
111+
<Frame
112+
width={16}
113+
height={9}
114+
as='li'
115+
>
116+
<img src='...' />
117+
</Frame>
118+
```
119+
120+
### Props
121+
122+
Same as `Frame`, with an additional prop:
123+
124+
- `innerStyle?: CSSProperties` - Additional styles applied to the inner container that holds the content.
125+
79126
## useMasonryGrid
80127

81128
Hook for advanced use cases when you need direct access to the masonry grid instance.
82129

83130
```tsx
84131
import { useMasonryGrid } from '@masonry-grid/react'
85-
import { MasonryGrid as VanillaMasonryGrid } from '@masonry-grid/vanilla'
132+
import { RegularMasonryGrid } from '@masonry-grid/vanilla'
86133

87134
function CustomGrid() {
88135
const containerRef = useMasonryGrid<HTMLDivElement>({
89-
type: VanillaMasonryGrid
136+
type: RegularMasonryGrid
90137
})
91138

92139
return (

‎website/src/content/docs/api/solid-js.mdx‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ sidebar:
55
order: 5
66
---
77

8-
## MasonryGrid
8+
## RegularMasonryGrid
99

1010
Standard masonry layout that stacks items by pulling them up to fill gaps.
1111

1212
```tsx
13-
import { MasonryGrid, Frame } from '@masonry-grid/solid-js'
13+
import { RegularMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/solid-js'
1414

1515
<MasonryGrid
1616
frameWidth={200}
@@ -36,22 +36,22 @@ import { MasonryGrid, Frame } from '@masonry-grid/solid-js'
3636
Balanced masonry layout that reorders items inside rows to minimize overall grid height.
3737

3838
```tsx
39-
import { BalancedMasonryGrid, Frame } from '@masonry-grid/solid-js'
39+
import { BalancedMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/solid-js'
4040

41-
<BalancedMasonryGrid
41+
<MasonryGrid
4242
frameWidth={200}
4343
gap={10}
4444
>
4545
<Frame width={4} height={3}>
4646
<img src='...' />
4747
</Frame>
4848
{/* more frames... */}
49-
</BalancedMasonryGrid>
49+
</MasonryGrid>
5050
```
5151

5252
### Props
5353

54-
Same as `MasonryGrid`.
54+
Same as `RegularMasonryGrid`.
5555

5656
## Frame
5757

@@ -76,17 +76,64 @@ import { Frame } from '@masonry-grid/solid-js'
7676
- `as?: ElementType` - Render as a different element (default: `'div'`).
7777
- All other HTML attributes are passed through.
7878

79+
## SpannedMasonryGrid
80+
81+
Experemental CSS-only masonry layout that uses `grid-row: span x` to create masonry effect.
82+
83+
```tsx
84+
import { SpannedMasonryGrid as MasonryGrid, SpannedFrame as Frame } from '@masonry-grid/solid-js'
85+
86+
<MasonryGrid
87+
frameWidth={200}
88+
gap={10}
89+
>
90+
<Frame width={4} height={3}>
91+
<img src='...' />
92+
</Frame>
93+
{/* more frames... */}
94+
</MasonryGrid>
95+
```
96+
97+
### Props
98+
99+
Same as `RegularMasonryGrid`, with an additional props:
100+
101+
- `precision?: number` - Precision for span calculation (default: `10`). Affects how accurately frames will maintain their aspect ratios. Higher precision results in more accurate sizes but may impact performance and cause bugs in some browsers.
102+
- `innerStyle?: JSX.CSSProperties` - Additional styles applied to the inner container that holds the frames.
103+
104+
## SpannedFrame
105+
106+
Component for defining spanned masonry grid item with aspect ratio.
107+
108+
```tsx
109+
import { SpannedFrame as Frame } from '@masonry-grid/solid-js'
110+
111+
<Frame
112+
width={16}
113+
height={9}
114+
as='li'
115+
>
116+
<img src='...' />
117+
</Frame>
118+
```
119+
120+
### Props
121+
122+
Same as `Frame`, with an additional prop:
123+
124+
- `innerStyle?: JSX.CSSProperties` - Additional styles applied to the inner container that holds the content.
125+
79126
## useMasonryGrid
80127

81128
Effect for advanced use cases when you need direct access to the masonry grid instance.
82129

83130
```tsx
84131
import { useMasonryGrid } from '@masonry-grid/solid-js'
85-
import { MasonryGrid as VanillaMasonryGrid } from '@masonry-grid/vanilla'
132+
import { RegularMasonryGrid } from '@masonry-grid/vanilla'
86133

87134
function CustomGrid() {
88135
const containerRef = useMasonryGrid({
89-
type: VanillaMasonryGrid
136+
type: RegularMasonryGrid
90137
})
91138

92139
return (

0 commit comments

Comments
 (0)