# Grid

This responsive grid system is designed to help you create flexible and responsive layouts in your web project.

## `.container`Container

Use .grid class to make a `.container`Container

Use `.column` classes `.col-{..number}` to define the width of your grid items. Columns are based on a 12-column layout , And `.column` for element in new column.

Classes for column

* `.col-1`
* `.col-2`
* `.col-3`
* `.col-4`
* `.col-5`
* `.col-6`
* `.col-7`
* `.col-8`
* `.col-9`
* `.col-10`
* `.col-11`
* `.col-12`

## Example

```html
<div class="container">
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="column b-dark">
      <div class="card">
        <h3 class="card-title">Hello</h3>
        <p class="card-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

```

<figure><img src="https://2921085085-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg5nbtYYIYcbVnZhdfLY2%2Fuploads%2F7z2u0xyhEWZFS1aOgUFn%2FScreenshot%202024-01-17%20165104.png?alt=media&#x26;token=dd8ecd57-b3ce-4ae5-8f40-7d1742b03240" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2921085085-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg5nbtYYIYcbVnZhdfLY2%2Fuploads%2FsEBPA4E2gilHUKuAx6tY%2FScreenshot%202024-01-17%20165206.png?alt=media&#x26;token=31b0e81b-1db6-45fe-81e7-519faa079dcc" alt=""><figcaption></figcaption></figure>