Image Gallery

How to make it…

This image gallery was generated with a tiny snippet of CSS

.image-gallery {
  list-style: none;
  column-width: 150px;
  column-gap: 2rem;
}

.image-gallery img,
.image-gallery li {
  margin: 0;
  padding: 0;
}
.image-gallery img {
  margin-bottom: 2rem;
}

and a list of images in MDX (this is the raw MDX of this page, taken from the frontmatter, where it was injected using the feature rawMdx)

# Image Gallery

Find some nice images that I have pulled from unsplash for demonstration purposes.

::list-style{.image-gallery}

- ![An astronaut](./adam-miller-dBaz0xhCkPY-unsplash.jpg)
- ![An astronaut](./edgar-moran-LboRnt38jpA-unsplash.jpg)
- ![An astronaut](./elia-pellegrini-C54fuJ5E8YU-unsplash.jpg)
- ![An astronaut](./bradley-dunn-i8qs7bfTB0M-unsplash.jpg)
- ![An astronaut](./elia-pellegrini-gasB30pgsg0-unsplash.jpg)
- ![An astronaut](./bradley-dunn-amF7lbfzLj0-unsplash.jpg)
- ![An astronaut](./elia-pellegrini-onwHGWNbPD0-unsplash.jpg)
- ![An astronaut](./elia-pellegrini-ZFnCkbhFvhw-unsplash.jpg)
- ![An astronaut](./nasa-5e9CmF-Ge9Y-unsplash.jpg)
- ![An astronaut](./nicolas-lobos-NR_tXTuyTak-unsplash.jpg)
- ![An astronaut](./history-in-hd-e5eDHbmHprg-unsplash.jpg)
- ![An astronaut](./levi-stute-mFF39sOZSgM-unsplash.jpg)
- ![An astronaut](./jonas-verstuyft-flsFQ3UTuKw-unsplash.jpg)
- ![An astronaut](./linus-sandvide-bhSNKT5aaMc-unsplash.jpg)
- ![An astronaut](./nick-brunner-LXspKUjsgH0-unsplash.jpg)
- ![An astronaut](./mike-kiev-Opzk_hvwO9Q-unsplash.jpg)

## How to make it...

This image gallery was generated with a tiny snippet of CSS

```css
.image-gallery {
  list-style: none;
  column-width: 150px;
  column-gap: 2rem;
}

.image-gallery img,
.image-gallery li {
  margin: 0;
  padding: 0;
}
.image-gallery img {
  margin-bottom: 2rem;
}
```

and a list of images in MDX (this is the raw MDX of this page, taken from the frontmatter, where it was injected using the feature [`rawMdx`](/docs#inject-raw-mdx))

<Code code={frontmatter?.rawmdx ?? 'Raw MDX not found'} lang="mdx" />