Flexbox grid - Layout - Spectre.css CSS Framework
Author: Yan Zhu
Description: Layout includes flexbox based responsive grid system with 12 columns. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Flexbox grid#

Layout includes flexbox based responsive grid system with 12 columns.

col-12 (100%)
col-9 (75%)
col-6 (50%)
col-3 (25%)

    <!-- flexbox grid example -->
    <div class="container">
      <div class="columns">
        <div class="column col-6">col-6</div>
        <div class="column col-3">col-3</div>
        <div class="column col-2">col-2</div>
        <div class="column col-1">col-1</div>
      </div>
    </div>

Add the `columns` class to a container with the `container` class. And add any element you want with the `column` class inside the container. These columns will take up the space equally. You can specify the width of each column by adding class `col-<1-12>`.

#### Gapless grid#

And you can add the `col-gapless` class to the `columns` to have gapless columns.

col-6 (gapless)
col-6 (gapless)

    <!-- gapless columns -->
    <div class="columns col-gapless">
      <div class="column col-6">col-6</div>
      <div class="column col-6">col-6</div>
    </div>

By default, Spectre grid has multi-line flexbox enabled. You can add the `col-oneline` class to `columns` to make all its child columns positioned in the same single row.

col-8
col-8

    <!-- one line columns -->
    <div class="columns col-oneline">
      <div class="column col-8">col-8</div>
      <div class="column col-8">col-8</div>
    </div>

#### Grid nesting#

To nest grids, add the new `columns` and `column` structure within an existing column.

col-6
col-6
col-6
col-6

    <!-- grid nesting example -->
    <div class="container">
      <div class="columns">
        <div class="column col-6">col-6
          <div class="columns">
            <div class="column col-6">col-6</div>
            <div class="column col-6">col-6</div>
          </div>
        </div>
        <div class="column col-6">col-6</div>
      </div>
    </div>

#### Column offset#

The Flexbox grid provides margin auto utilities to set offset. There are `col-mx-auto`, `col-ml-auto` and `col-mr-auto` to set margins between columns without using empty columns.

col-2
col-4 col-mx-auto
col-2
col-4 col-ml-auto
col-4 col-ml-auto
col-2
col-4 col-mx-auto
col-2
col-4 col-mr-auto
col-2
col-4 col-mx-auto

    <!-- grid offset example -->
    <div class="container">
      <div class="columns">
        <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
        <div class="column col-2">col-2</div>
      </div>
    </div>

#### Auto width column#

You can add the `col-auto` class to the `column` to have auto width columns. There are `col-xl-auto`, `col-lg-auto`, `col-md-auto`, `col-sm-auto` and `col-xs-auto` to set auto width in different viewport sizes.

col-auto
col
col-lg-auto
col

    <!-- auto width column example -->
    <div class="container">
      <div class="columns">
        <div class="column col-auto">col-auto</div>
        <div class="column">col</div>
      </div>
    </div>

    <div class="container">
      <div class="columns">
        <div class="column col-lg-auto col-6">col-lg-auto</div>
        <div class="column">col</div>
      </div>
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.