PrimeGlitz Digital Media | CSS3 Multi-column Layouts
17563
single,single-post,postid-17563,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-10.0,wpb-js-composer js-comp-ver-4.12,vc_responsive

CSS3 Multi-column Layouts

CSS3-Multi--column-Layouts

CSS3 Multi-column Layouts

CSS3 Multi-column Layouts
The CSS multi-column layout uses new CSS properties which allow designers to break a layout into blocks. The two main properties which control the number of columns are: column-count and column-width.
Related Properties
 
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill
  • columns
Degradation
 
Column properties are ignored by browsers which don’t support them. To deal with that issue, create a single column layout for unsupported browsers and multiple columns with browsers that support them.
Note: To make sure you can use multiple columns, each property needs to be written three times: Once with the -moz prefix, once with the -webkit prefix, and once without the prefix.
Syntax
Here are some examples of how you would use the multi-column properties:
Here’s how to use column-count:
<style>
.columns2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
</style>
</head>
<body>
<div class=”columns2″>
Your online presence is equally, if not more important then your offline presence and reputation you have built for years. High-quality solutions are created with full understanding of the problems, and by committed and responsible acting at all levels.
And the result.
You use the column-width property to set the smallest column width. If you don’t set the column-count, the browser will take over and create as many columns as necessary to fit the width. Here’s the code:
<style>
.columns2 {
    -webkit-column-width:20em; /* Chrome, Safari, Opera */
    -moz-column-width:20em; /* Firefox */
    column-width:20em;
}
</style>
</head>
<body>
<div class=”columns2″>
Your online presence is equally, if not more important then your offline presence and reputation you have built for years. High-quality solutions are created with full understanding of the problems, and by committed and responsible acting at all levels.
</div>
And the result.
Here is an example which makes use of column-count, column-gap, and column-rule:
<style>
.columns3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
    -moz-column-gap: 50px; /* Firefox */
    column-gap: 50px;
    -webkit-column-rule: 15px outset #00ffff; /* Chrome, Safari, Opera */
    -moz-column-rule: 15px outset #00ffff; /* Firefox */
    column-rule: 15px outset #00ffff;
}
</style>
</head>
<body>
<div class=”columns3″>
Your online presence is equally, if not more important then your offline presence and reputation you have built for years. High-quality solutions are created with full understanding of the problems, and by committed and responsible acting at all levels.
</div>
No Comments

Post A Comment