CSS Multiple Columns
CSS Multiple Columns
CSS Multiple Columns, CSS Setting Multiple Column, Styling Column Rules, etc. you read here all about CSS columns using in HTML pages.
So, in this tutorial you will read all about CSS Multiple Columns and you also read above all topic which we will read in tutorial, you also given you here programming output of example that for your better understanding.
CSS Multiple Columns
Through the using of CSS in HTML, you can make multiple column of text and paragraph inside an element.
CSS Columns Properties;
Some CSS multiple column properties are given below, using these properties you can create a simple and stylish column in your webpages and websites.
- columns
- column-count
- column-width
- column-span
- column-gap
- column-rule
- column-rule-style
- column-rule-width
- column-rule-color
How to Create CSS Multiple Columns;
To create the multiple column in layout we need to use a CSS property that is the column-count CSS property, through using this property you can create multiple columns layout.
The column-count CSS property break an element’s content into the specified number of column.
Now you see the programming examples of all the types of multiple columns with programming examples, using the all properties of CSS which you read above CSS multiple column’s properties.
Simple Example of CSS Multiple Columns;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Columns</title> <style type="text/css"> body{ padding: 10px; background: lightblue; font-size: 20px;} .columns{column-count: 2;} </style> </head> <body> <div class="columns">Lorem100</div> </body> </html> |
Output of above programming example;
CSS Columns Width Setting;
To set the width of columns we need a CSS property which is column-width
property. Look below programming examples to better understanding.
Programming Example of Column width Setting;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Columns</title> <style type="text/css"> body{ padding: 10px; background: rgb(73, 2, 2); font-size: 20px; color: white; } .columns{column-count: 3; column-width: 50px ;} </style> </head> <body> <div class="columns">Lorem100</div> </body> </html> |
Output of above programming examples;
You can see above output of programming examples, which have three columns and columns width is 50px of all the columns.
You can also write to set the columns width and count of an elements, like (“column: 50px 3;” it defines three columns and columns width is 50px).
CSS Columns Styling Rules
You can style the multiple column layout by changing it width, style and color through using and applying the column rules properties.
Column Styling properties;
- column-rule-style; This CSS property set the style of the line drawn between columns in multiple column input.
- column-rule-width; This property uses to set the width of the line drawn between columns in a multi-column layout.
- column-rule-color; The property uses to set the color of the line between columns in a multi-column layout.
Valid Value to use the column-rule style property;
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outside
now see the programing examples of the style rule properties of multiple columns in CSS. You can write the three all tyle rule value in one element which is column-rule, for better understanding look below the programming examples.
Programming Examples of CSS Column Styling Rule;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Columns</title> <style type="text/css"> body{ padding: 10px; background:lightblue; font-size: 20px; font-weight: bold; color: rgb(9, 51, 1);} .columns{column-count: 3; column-width: 50px ; column-rule-color: red; column-rule-style: double; column-rule-width: 10px;} </style> </head> <body> <div class="columns">Lorem200</div> </body> </html> |
Output of above programming examples;
Above you can see the output of programming example there a new style is added, which is border/line between all the columns because we used here styling column-rule properties.
Let’s see one programming examples of stylish column, here we used different values and properties.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Columns</title> <style type="text/css"> body{ padding: 10px; background:rgb(0, 65, 3); font-size: 20px; font-weight: bold; color: rgb(255, 255, 255); } .columns{column-count: 3; column-width: 50px ; column-rule: groove 10px blue;} </style> </head> <body> <div class="columns">Lorem100</div> </body> </html> |
Output of above programming example;
You can see the above programming examples, this is different from all above programming here form column, border line style is also different.
CSS Specifying an Element Span in a Column
The column-span property used to set how many columns an element should span inside a multi-column layout.
Valid Value to set the column-span Property;
- all: Through using this value the element spans across all columns.
-
none: The element does not span multiple columns.
Look below the programming examples to better understanding, the example below shows an <h2> element which spans two columns.
Programming Examples of column-span Property;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Columns</title> <style type="text/css"> body{ padding: 10px; background:rgb(135, 0, 156); font-size: 20px; font-weight: bold; color: rgb(255, 255, 255); } .columns{column-count: 2; column-width: 50px ; column-rule: groove 10px blue;} h2{column-span: all; text-align: center;} </style> </head> <body> <div class="columns"> <h2>Multiple Columns</h2> Lorem100</div> </body> </html> |
Output of above programming examples;
Above you can see the output of column-span property programming example, where is two columns with a colorful border line and heading “Multiple Columns” is span all two columns because here we use the column-span CSS property.
So, in this tutorial you learned all about the CSS Multiple Column includes how to create multiple column in CSS, how to design it, different- different types of programming example, CSS Setting Multiple Column, Styling Column Rules, column-span you learned hare all these properties, I hope you read this tutorial well, and learn new somethings.
Read Also-
5 Comments
zoritoler imol · July 2, 2022 at 3:43 am
I think this internet site has got some rattling great information for everyone : D.
graliontorile · August 6, 2022 at 3:42 pm
Wonderful post however , I was wondering if you could write a litte more on this topic? I’d be very grateful if you could elaborate a little bit more. Appreciate it!
zoritoler imol · September 2, 2022 at 3:23 pm
Howdy! This is my first comment here so I just wanted to give a quick shout out and tell you I truly enjoy reading through your blog posts. Can you suggest any other blogs/websites/forums that deal with the same topics? Thanks a ton!
bhupat · December 14, 2022 at 8:57 am
Bhupat Bhai Dholakiya gam laathi tme kyana. Maaro son b group ma chee. Tamaro son?
binance wallet · April 9, 2023 at 2:45 pm
Your point of view caught my eye and was very interesting. Thanks. I have a question for you.