# Gallery

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0B2FzC2567Bm84R-%2Fgal-2.png?generation=1535987991587398\&alt=media)

Galleirs use `.ol-grid` class

```
<div class="ol-grid grid col-4 ol-lightbox-gallery with-gutter">

  <a href="../../assets/img/portfolio/01.jpg" class="grid-item ol-lightbox">
    <div class="gi-wrapper ol-hover hover-1">
      <div class="img-layer set-bg"><img src="../../assets/img/portfolio/01.jpg" alt="portfolio item"></div>
      <div class="ol-overlay ov-dark-alpha-80"></div>
      <div class="icons"><i class="oli oli-camera2"></i></div>
    </div>
  </a>
  ...
</div>
```

* `.col-4` means that this grid is a 4-column one
* Also you can use `.col-1`, `.col-2`, `.col-3`, `.col-4`, `.col-5`
* `.with-gutter` add the gutter between images

## `.ratio-2`

This makes images to fit the ratio of 70% height to width

```
<a href="../../assets/img/portfolio/01.jpg" class="grid-item ol-lightbox ratio-2">
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0B2IoxngW27T8RP3%2Fgal-1.png?generation=1535987991566495\&alt=media)

## `.ratio-3`

This makes images to fit the ratio of 200% height to width

```
<a href="../../assets/img/portfolio/01.jpg" class="grid-item ol-lightbox ratio-3">
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0B2KPv9OUXBylaOz%2Fgal-3.png?generation=1535987991712781\&alt=media)
