# Grid

A custom directive that creates responsive grid layouts using Foundation’s grid system.
Perfect for organizing topic boxes in rows and columns.

#### NOTE
The grid directive currently supports only [Topic box](https://sphinx-theme.scylladb.com/master/examples/topic-box.md) directives as content.
Other content types are not supported within grids.

## Syntax

```rst
.. grid::
   <options>

   .. topic-box::
      <topic-box options>

      <content>
```

## Options

The `grid` directive supports the following options:

| Option   | Type   | Required   | Example Value              | Description                                                       |
|----------|--------|------------|----------------------------|-------------------------------------------------------------------|
| `class`  | string |            | large-3                    | Custom CSS class.                                                 |
| `type`   | string |            | scrollable                 | Grid type. Available values: `default`, `scrollable`, `products`. |
| `title`  | string |            | Lorem Ipsum                | Grid title.                                                       |
| `text`   | string |            | Lorem ipsum dolor sit amet | Grid description.                                                 |

## Supported Content

The grid directive works exclusively with **topic-box** directives. Each topic-box within a grid should include Foundation grid classes in its `:class:` option to control layout:

- `large-3` - 4 columns per row on desktop
- `large-4` - 3 columns per row on desktop
- `large-6` - 2 columns per row on desktop
- `large-12` - 1 column per row (full width)
- `small-6` - 2 columns per row on mobile

For more information about topic-box options and usage, see [Topic box](https://sphinx-theme.scylladb.com/master/examples/topic-box.md).

## Usage

### Basic grid

Using:

```rst
.. grid::
    :type: default

    .. topic-box::
        :title: Quick Start
        :link: #
        :class: large-6
        :anchor: Get Started

        Learn how to get started with ScyllaDB.

    .. topic-box::
        :title: Architecture
        :link: #
        :class: large-6
        :anchor: Learn More

        Understand ScyllaDB's architecture and design principles.
```

Results in:


            <div class="topics-grid ">
                
                <div class="grid-container full">
                    <div class="grid-x grid-margin-x">
            
            
                <div class="cell topic-box large-6">
                    <a class="card" href="../getting-started/index.md" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Quick Start</h3>
                </div>
                <div class="topic-box_\_body">
            
Learn how to get started with ScyllaDB.


            
                <div class="topic-box_\_anchor">Get Started</div>
                
            </div>
            </a></div>
            
            
                <div class="cell topic-box large-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Architecture</h3>
                </div>
                <div class="topic-box_\_body">
            
Understand ScyllaDB’s architecture and design principles.


            
                <div class="topic-box_\_anchor">Learn More</div>
                
            </div>
            </a></div>
            </div></div></div>

### Scrollable grid

Using:

```rst
.. grid::
    :type: scrollable

    .. topic-box::
        :title: Installation
        :link: #
        :class: large-3
        :anchor: Install

        Install ScyllaDB on your system.

    .. topic-box::
        :title: Configuration
        :link: #
        :class: large-3
        :anchor: Configure

        Configure ScyllaDB for your needs.

    .. topic-box::
        :title: Security
        :link: #
        :class: large-3
        :anchor: Secure

        Secure your ScyllaDB deployment.

    .. topic-box::
        :title: Monitoring
        :link: #
        :class: large-3
        :anchor: Monitor

        Monitor your ScyllaDB cluster.
```

Results in:


            <div class="topics-grid topics-grid--scrollable">
                
                <div class="grid-container full">
                    <div class="grid-x grid-margin-x hs">
            
            
                <div class="cell topic-box large-3">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Installation</h3>
                </div>
                <div class="topic-box_\_body">
            
Install ScyllaDB on your system.


            
                <div class="topic-box_\_anchor">Install</div>
                
            </div>
            </a></div>
            
            
                <div class="cell topic-box large-3">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Configuration</h3>
                </div>
                <div class="topic-box_\_body">
            
Configure ScyllaDB for your needs.


            
                <div class="topic-box_\_anchor">Configure</div>
                
            </div>
            </a></div>
            
            
                <div class="cell topic-box large-3">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Security</h3>
                </div>
                <div class="topic-box_\_body">
            
Secure your ScyllaDB deployment.


            
                <div class="topic-box_\_anchor">Secure</div>
                
            </div>
            </a></div>
            
            
                <div class="cell topic-box large-3">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Monitoring</h3>
                </div>
                <div class="topic-box_\_body">
            
Monitor your ScyllaDB cluster.


            
                <div class="topic-box_\_anchor">Monitor</div>
                
            </div>
            </a></div>
            </div></div></div>

### Products grid

Using:

```rst
.. grid::
    :type: products
    :title: ScyllaDB Products
    :text: Choose the right ScyllaDB product for your needs

    .. topic-box::
        :title: ScyllaDB Enterprise
        :link: #
        :image: /_static/img/mascots-2/enterprise.svg
        :class: topic-box--product,large-4,small-6

        Enterprise-grade NoSQL database with advanced features and support.

    .. topic-box::
        :title: ScyllaDB Cloud
        :link: #
        :image: /_static/img/mascots-2/cloud.svg
        :class: topic-box--product,large-4,small-6

        Fully managed NoSQL database as a service.

    .. topic-box::
        :title: ScyllaDB Open Source
        :link: #
        :image: /_static/img/mascots-2/opensource.svg
        :class: topic-box--product,large-4,small-6

        Free and open-source NoSQL database.
```

Results in:


            <div class="topics-grid topics-grid--products">
                
                <h2 class="topics-grid_\_title">ScyllaDB Products</h2>
                <p class="topics-grid_\_text">Choose the right ScyllaDB product for your needs</p>
                
                <div class="grid-container full">
                    <div class="grid-x grid-margin-x">
            
            
                <div class="cell topic-box topic-box--product large-4 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">ScyllaDB Enterprise</h3>
                </div>
                <div class="topic-box_\_body">
            
Enterprise-grade NoSQL database with advanced features and support.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-4 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/cloud.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">ScyllaDB Cloud</h3>
                </div>
                <div class="topic-box_\_body">
            
Fully managed NoSQL database as a service.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-4 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots-2/docs.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">ScyllaDB Docs</h3>
                </div>
                <div class="topic-box_\_body">
            
Documentation for ScyllaDB.


            
            </div>
            </a></div>
            </div></div></div>