Design System

Image Grid

Usage pattern

Important

The ImageGrid component is designed to have content slotted inside it. This flexibility allows for usage in MDX as well as declarative component usage.

Responsive syntax

The columns and span props accept an object, a positional array, or a single value.

1
{/* Object form */}
2
<ImageGrid columns={{ mobile: 2, tablet: 3 }} space="small" span={{ mobile: 2, tablet: 'full' }}>
3

4
{/* Array form - positional shorthand: [mobile, tablet, desktop] */}
5
<ImageGrid columns={[2, 3]} space="small" span={[2, 'full']}>
6

7
{/* Single value - same at all breakpoints */}
8
<ImageGrid columns={3} space="small">

MDX usage

In MDX, markdown image syntax works directly as slot content alongside nested grids and video. Demonstrates responsive columns, fixed span, responsive span, and video.

1
<ImageGrid columns={[2, 3]} space="x-small">
2
    <ImageGrid columns={2} space="x-small" span="full">
3
        ![](../../../content/article/2025/images/year-in-review/img-7456.jpeg)
4
        ![](../../../content/article/2025/images/year-in-review/img-7460.jpeg)
5
    </ImageGrid>
6
    ![](../../../content/article/2025/images/year-in-review/img-7467.jpeg)
7
    ![](../../../content/article/2025/images/year-in-review/img-7462.jpeg)
8
    ![](../../../content/article/2025/images/year-in-review/img-7457.jpeg)
9
    ![](../../../content/article/2025/images/year-in-review/img-7468.jpeg)
10
    ![](../../../content/article/2025/images/year-in-review/img-7473.jpeg)
11
    ![](../../../content/article/2025/images/year-in-review/img-7477.jpeg)
12
    <ImageGrid columns={1} space="x-small" span="full">
13
        <video controls loop autoplay muted>
14
            <source src="https://video.lloydatkinson.net/video-7614.mp4" type="video/mp4" />
15
        </video>
16
    </ImageGrid>
17
</ImageGrid>

Component usage

Using the Image component from astro:assets as slot content with the same nesting and span capabilities.

1
<ImageGrid
2
    columns={{ mobile: 2, tablet: 3 }}
3
    space="x-small">
4
    <ImageGrid
5
        columns={2}
6
        space="x-small"
7
        span="full">
8
        <Image
9
            src={photo1}
10
            alt=""
11
            width={600}
12
        />
13
        <Image
14
            src={photo2}
15
            alt=""
16
            width={600}
17
        />
18
    </ImageGrid>
19
    <Image
20
        src={photo3}
21
        alt=""
22
        width={600}
23
    />
24
    <Image
25
        src={photo4}
26
        alt=""
27
        width={600}
28
    />
29
    <Image
30
        src={photo5}
31
        alt=""
32
        width={600}
33
    />
34
    <Image
35
        src={photo6}
36
        alt=""
37
        width={600}
38
    />
39
    <Image
40
        src={photo7}
41
        alt=""
42
        width={600}
43
    />
44
    <Image
45
        src={photo8}
46
        alt=""
47
        width={600}
48
    />
49
    <ImageGrid
50
        columns={1}
51
        space="x-small"
52
        span="full">
53
        <video
54
            controls
55
            loop
56
            autoplay
57
            muted>
58
            <source
59
                src="https://video.lloydatkinson.net/video-7614.mp4"
60
                type="video/mp4"
61
            />
62
        </video>
63
    </ImageGrid>
64
</ImageGrid>