Grid System

The Skeletonic CSS grid system is the fastest and easy way to create responsive web page layout.

Overview

Skeletonic CSS v.1.0.5 has a simple, fluid, mobile-first, CSS flexbox based, responsive grid that collapses at small viewport.

It is based on a 12-columns fluid grid and constitutes the geometric foundation of all the visual elements of the Skeletonic CSS framework, from typography to forms, tables and visual components.

Container

The Container is the main layout element and is required when using the Skeletonic CSS v.1.0.5 default grid system. The Container provides a means to center and horizontally pad the site’s content. The box-sizing property guarantees that the content box shrinks seamlessly to make space for padding and borders.

<pre> <style> .container { position: relative; box-sizing: border-box; width: 96%; margin: 0 auto; padding: 0 24.270509831248425 rem; } </style> <div class="container">  </div> </pre>

The Grid system

Skeletonic CSS v.1.0.5 grid system uses a series of container, rows, and columns to layout and align your content. Below is a basic example of how the grid comes together. The columns are centered in the page with the parent Container class .container, the layout is governed by Flex class .flex-# properties. Each Flex column has pre-defined horizontal padding (called a gutter) for controlling the space between them.

flex-1

flex-11

flex-2

flex-10

flex-3

flex-9

flex-4

flex-8

flex-5

flex-7

flex-6

flex-7

flex-5

flex-8

flex-4

flex-9

flex-3

flex-10

flex-2

flex-11

flex-1

flex-12

How it works

Flex classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want a two column responsive layout, where your page will display two equal-width columns across, you can simply use the class .flex-6.

Twelve Column Responsive Layout

Twelve equal-width columns across the page.

flex-1

Six Column Responsive Layout

Six equal-width columns across the page.

flex-2

Four Column Responsive Layout

Four equal-width columns across the page.

flex-3

Three Column Responsive Layout

Three equal-width columns across the page.

flex-4

Two Column Responsive Layout

Two equal-width columns across the page.

flex-6

One Column Responsive Layout

One column width across the page.

flex-12

<section class="grid-flex">
    <row class="background-color-red-100 flex-1"><p>flex-1</p></row>
    <row class="background-color-red-100 flex-11"><p>flex-11</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-pink-100 flex-2"><p>flex-2</p></row>
    <row class="background-color-pink-100
    flex-10"><p>flex-10</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-purple-100
    flex-3"><p>flex-3</p></row>
    <row class="background-color-purple-100
    flex-9"><p>flex-9</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-deep-purple-100
    flex-4"><p>flex-4</p></row>
    <row class="background-color-deep-purple-100
    flex-8"><p>flex-8</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-indigo-100
    flex-5"><p>flex-5</p></row>
    <row class="background-color-indigo-100
    flex-7"><p>flex-7</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-blue-100 flex-6"><p>flex-6</p></row>
    <row class="background-color-blue-100 flex-6"><p>flex-6</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-light-blue-100
    flex-7"><p>flex-7</p></row>
    <row class="background-color-light-blue-100
    flex-5"><p>flex-5</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-cyan-100 flex-8"><p>flex-8</p></row>
    <row class="background-color-cyan-100 flex-4"><p>flex-4</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-teal-100 flex-9"><p>flex-9</p></row>
    <row class="background-color-teal-100 flex-3"><p>flex-3</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-green-100
    flex-10"><p>flex-10</p></row>
    <row class="background-color-green-100 flex-2"><p>flex-2</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-light-green-100
    flex-11"><p>flex-11</p></row>
    <row class="background-color-light-green-100
    flex-1"><p>flex-1</p></row>
</section>

<section class="grid-flex">
    <row class="background-color-lime-100
    flex-12"><p>flex-12</p></row>
</section>

Grid options

Skeletonic CSS v.1.0.5 Flexbox Layout aims at providing a more efficient way to lay out, align and distribute space among items in a container.

grid-flex

The flex-wrap CSS property sets the direction that lines are stacked. The flex-wrap: wrap property will allow our items to wrap as the parent container shrinks or is constrained.

<pre> .grid-flex { align-items: center; flex-wrap: wrap; } </pre>