# Columns

Columns are a great way to create different layouts for your documentation. You can add many different types of blocks inside a column, and adjust the width of each side to customize it to the design you need.

{% columns %}
{% column width="50%" %}

#### Create a seamless experience between your docs and product

Integrate your documentation right into your product experience, or give users a personalized experience that gives them what they need faster.

<a href="https://www.gitbook.com/#alpha-waitlist" class="button primary">Learn more</a>
{% endcolumn %}

{% column %}

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FNMfJRm6dUVv7erqeWmAk%2Fcolumns.png?alt=media&#x26;token=925af10f-1f4e-40cc-9cd2-cccf213460ff" alt="An image of GitBook icons demonstrating side by side column functionality"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Representation in Markdown

<pre class="language-markdown" data-overflow="wrap"><code class="lang-markdown"><strong>## Example
</strong>




### Create a seamless experience between your docs and product

Integrate your documentation right into your product experience, or give users a personalized experience that gives them what they need faster.

&#x3C;a href="https://www.gitbook.com/#alpha-waitlist" class="button primary">Learn more&#x3C;/a>





&#x3C;figure>&#x3C;img src="../../.gitbook/assets/GitBook vision post.png" alt="An image of GitBook icons demonstrating side by side column functionality">&#x3C;figcaption>&#x3C;/figcaption>&#x3C;/figure>




</code></pre>
