Wellcome CSS Framework version 3.2.2

Download

Grid System

CSS Responsive Grid Layout

The grid layout becomes the web designing bible while using a flexible layout. The CSS relative system looks to realize the grid based on the respective screen size. Most individuals use the 12 grid layout so that the site continues to get a feel of a normal website.

Responsive web design CSS

The CSS framework of responsive designing provides an optimal experience and easy reading. More importantly the process is easy to navigate with minimum resizing on varied devices. The device might include desktops along with mobiles and tabs.

  Extra small Small Medium Large
Max Width 480px 767px 991px >991px (All Desktop)
class col-xs- col-sm- col-md- col-lg-
Number of Column 12 12 12 12
Column Order .order-xs- .order-sm- .order-md- .order-lg-
Column Padding padding:0px 15px; padding:0px 15px; padding:0px 15px; padding:0px 15px;

Copy This Box Code And Use Your Project.

col-xs-1 col-sm-1 col-md-1 col-lg-1
col-xs-11 col-sm-11 col-md-11 col-lg-11
col-xs-2 col-sm-2 col-md-2 col-lg-2
col-xs-10 col-sm-10 col-md-10 col-lg-10
col-xs-3 col-sm-3 col-md-3 col-lg-3
col-xs-9 col-sm-9 col-md-9 col-lg-9
col-xs-4 col-sm-4 col-md-4 col-lg-4
col-xs-8 col-sm-8 col-md-8 col-lg-8
col-xs-5 col-sm-5 col-md-5 col-lg-5
col-xs-7 col-sm-7 col-md-7 col-lg-7
col-xs-6 col-sm-6 col-md-6 col-lg-6
col-xs-6 col-sm-6 col-md-6 col-lg-6
col-xs-7 col-sm-7 col-md-7 col-lg-7
col-xs-5 col-sm-5 col-md-5 col-lg-5
col-xs-8 col-sm-8 col-md-8 col-lg-8
col-xs-4 col-sm-4 col-md-4 col-lg-4
col-xs-9 col-sm-9 col-md-9 col-lg-9
col-xs-3 col-sm-3 col-md-3 col-lg-3
col-xs-10 col-sm-10 col-md-10 col-lg-10
col-xs-2 col-sm-2 col-md-2 col-lg-2
col-xs-11 col-sm-11 col-md-11 col-lg-11
col-xs-1 col-sm-1 col-md-1 col-lg-1

Grid System Output

column 1
column 11
column 2
column 10
column 3
column 9
column 4
column 8
column 5
column 7
column 6
column 6
column 7
column 5
column 8
column 4
column 9
column 3
column 10
column 2
column 11
column 1

CSS Grid Column

The grid column property specifies a grid items size and location in a particular grid layout. It is a shortened property for the grid column start and for grid column end. What you can do is use column-line values instead of number of column to span.

One Grid System

Copy This Box Code And Use Your Project.

column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1

One Grid System Output

column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1
column 1

Two Grid System

Copy This Box Code And Use Your Project.

column 6
column 6

Two Grid System Output

column 6
column 6

Three Grid System

Copy This Box Code And Use Your Project.

column 4
column 4
column 4

Three Grid System Output

column 6
column 6
column 6

Four Grid System

Copy This Box Code And Use Your Project.

column 3
column-3
column-3
column-3

Four Grid System Output

column 3
column 3
column 3
column 3

Four and Eight Grid System

Copy This Box Code And Use Your Project.

column 4
column 8

Four and Eight Grid System Output

column 4
column 8

Five and Seven Grid System

Copy This Box Code And Use Your Project.

column 5
column 7

Five and Seven Grid System Output

column 5
column 7

Three and Nine Grid System

Copy This Box Code And Use Your Project.

column 3
column 9

Three and Nine Grid System Output

column 3
column 9

Twelve Grid System

Copy This Box Code And Use Your Project.

column 12

Twelve Grid System Output

column 12