CSS Columns Layout

You can find a huge number of different website layouts online. These websites have different sections which can collectively be divided into different parts namely header, navigation, content and footer.

Header section is generally the top-most section of a web page and generally includes some social links, website logo and website name. The navigation section holds a collection of links that users can click to navigate through other pages of the website. The main content section holds all other information that are displayed on the page. This section most often holds multiple columns and rows that helps to make the overall outlook beautiful while keeping the contents organized. Footer section holds information like copyright, contact details, important links and social icons.

Main Content

Website Layout With CSS Columns

The CSS property columns allow you to create multiple columned website layouts easily. You should define a number of CSS column related properties though, which are explained below.

CSS Column-count

CSS property column-count defines the number of columns an element should be divided into.

.demo{
  column-count: 3;
}

CSS Column-gap

CSS property column-gap is used to define the spacing between columns.

.demo{
  column-gap: 30px;
}

CSS Column-rule-style

CSS property column-rule-style is used to define the style of rule which is basically a border between the columns.

.demo{
  column-rule-style: solid;
}

CSS Column-rule-width

CSS property column-rule-width is used to define the width of rule between the columns.

.demo{
  column-rule-width: 30px;
}

CSS Column-rule-color

CSS property column-rule-color is used to define the color of rule between the columns.

.demo{
  column-rule-color: #fff;
}

CSS Column-rule Shorthand

CSS property column-rule is a shorthand property for column-rules used to define the width of rule between the columns.

.demo{
  column-rule: 30px solid #fff;
}

CSS Column-span

CSS property column-span is used to force and element across all columns.

.column-heading{
  column-span: all;
}

CSS Column-width

CSS property column-width is used to define the minimum width of the columns.

.demo{
  column-width: 300px;
}

CSS Columns Shorthand

CSS coulmns can be used as a shorthand property for column-width and column-count.

.demo{
  columns: 300px 3;
}