QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads CSS3 Multiple Columns Example

CSS3 Multiple Columns Example

css3-columns

Using CSS3 multiple columns you can layout your text in multiple columns just like newspapers, book indexes etc. Let’s see how we can make beautiful designs using CSS3 multiple columns.


column-count CSS3 Property

To create multiple text columns you have to specify this property. This is assigned to the number of columns. The width of the columns are auto calculated based on the number of columns.

column-gap CSS3 Property

Used to specify the gap between the columns.

column-rule CSS3 Property

Its used to provide width, style and color of the rule(a line drawn to divide the columns).

Style can have the following values: hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.

column-fill CSS3 Property

Using this property we can specify if the columns should have same length or sequential(different) length.

This property can be assigned to auto or balance. balance make it same length whereas auto makes it sequential. balance is the default value.

column-span CSS3 property

By default block level elements inside the content take full width of the columns not the container. We can force them to take full width of the container using this property.

It can be assigned to 1 or all. 1 is the default value.

column-width CSS3 Property

We can manually assign the width of the columns using column-width property. But its always better to make them auto calculated.

Making CSS3 Columns Responsive

We can make CSS3 columns responsive by dropping number of columns as the viewport width decreases.

Browser Support

All CSS3 supported browsers support column-count, column-width, column-gap and column-rule properties. But column-fill and column-span are yet to be supported by all browsers.

Jul 27, 2014Narayan Prusty
Passing Arguments To JavaScript FilesHTML5 Drag and Drop API Tutorial

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • column-count CSS3 Property
  • column-gap CSS3 Property
  • column-rule CSS3 Property
  • column-fill CSS3 Property
  • column-span CSS3 property
  • column-width CSS3 Property
  • Making CSS3 Columns Responsive
  • Browser Support
Related Articles
  • HTML Table Designing and Best Practices with Examples
  • Changing CSS Style using JavaScript
  • Color Selection Techniques For Websites
  • Web Animation API Tutorial
  • Layout Concepts For Web Designers
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license