The multiple columns are used to create column layout in the web pages. There are many column property in CSS which are listed below:
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width
The column-count property: This property is used to count the number of column element in document that should be divided.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column-count property</ title >
< style >
.geeks_content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding-top: 35px;
text-align: justify;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output:
The columns-gap property: This property is used to define the gap between columns.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column gap</ title >
< style >
.geeks_content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding-top: 35px;
text-align: justify;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
width: 100%;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output:
The column-rule-style property: This property is used to specify the style between the columns.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column-rule-style property</ title >
< style >
.geeks_content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding-top: 35px;
column-rule-style: solid;
text-align: justify;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output:
The column-rule-width property: This property is used to specify the width of rule between columns.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column-rule-width property</ title >
< style >
.geeks_content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding-top: 35px;
-webkit-column-gap: 40px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
width: 100%;
text-align: justify;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output:
The column-rule-color property: This property is used to define the color between the columns.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column-rule-color property</ title >
< style >
.geeks_content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding-top: 35px;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
width: 100%;
text-align: justify;
-webkit-column-rule-color: green;
-moz-column-rule-color: green;
column-rule-color: green;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output:
The column-rule property: This property is used to define the style, width, and color of the rule between columns.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column-rule property</ title >
< style >
.geeks_content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding-top: 35px;
-webkit-column-rule: 10px solid green;
-moz-column-rule: 10px solid green;
column-rule: 10px solid green;
width: 100%;
text-align: justify;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output:
The column-span property: This property is used to define an element that should span across how many columns.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column-span property</ title >
< style >
.geeks_content {
-webkit-column-span: 3;
column-span: 3;
-moz-column-count: 3;
column-count: 3;
padding-top: 35px;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
width: 100%;
text-align: justify;
-webkit-column-rule-color: green;
-moz-column-rule-color: green;
column-rule-color: green;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output:
The column-width property: This property is used to specify the width of each column.
Example:
<!DOCTYPE html> < html >
< head >
< title >Column-width property</ title >
< style >
.geeks_content {
margin-top: 35px;
-webkit-column-width: 250px;
-moz-column-width: 250px;
column-width: 250px;
text-align: justify;
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< div class = "geeks_content" >
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</ div >
</ body >
</ html >
|
Output: