Rate this post

Table of Contents

CSS Columns

Visualize a page where your content appears naturally, like to a well-produced newspaper. With a few lines of code and CSS columns, you can design aesthetically pleasing multi-column layouts—this fantasy becomes a reality.

Let’s explore the realm of column attributes first:

Introduction to CSS Columns

The width and number of columns can be specified using the CSS columns property. Content can be organized into numerous columns using CSS columns, much like a newspaper style. It can accept more than one value at once.

The property known as columns serves as a shortcut for:

column-width
column-count

column-width:

Each column’s minimum width will be specified in the column-width section.

Syntax:

element{
           column-width: auto| length| initial| inherit; }

column-count:

The maximum amount of columns will be specified in the column-count section.

Syntax:

element{
              column-count: number| auto| initial| inherit; }

Property Values:

PROPERTY VALUE	DESCRIPTION
auto	The default value. Sets the column-count and column-width to “auto”.
inherit	carries over the values for column-width and column-count from its parent element.
initial	Sets the column-count and column-width variables to their initial default values.

Syntax:

element{
           columns: column-width column-count | auto | inherit | initial; }

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS | columns Property</title>
        <style>
            body {
                text-align: center;
                color: blue;
                background-color: skyblue;
            }

            .cds{
                -webkit-columns: 70px 4;
                /* Chrome, Safari, Opera */
                -moz-columns: 70px 4;
                /* Firefox */
                columns: 70px 4;
            }
        </style>
    </head>

    <body>
        <h1>The CSS column Property</h1>
        <div class="cds">
            <h2>
                Welcome to the world of Coders!!
            </h2>
            Our goal at my online learning platform is to assist students in realizing their full coding potential. Our goal is to close the knowledge gap between theory and practice by means of interactive learning experiences and carefully selected courses.  
            <div>
                <strong
                    >Our platform includes:</strong
                >
                <p>
                    Our objective is to prepare students for achievement in the quickly changing tech business by giving them useful skills that they can use in real-world situations.
                </p>
                <p>
                    We are aware of the importance of cooperation and the strength of group intelligence. We think that by collaborating, we can do more and have a bigger influence. Come work with us and become a part of a collaborative, supportive community.
                </p>
                <p>
                    We have a strong desire to excel. From the expertise of our instructors to the abilities of our courses, we strive for quality across the board in our platform. Our goal is to provide you the resources you need to comprehend coding and embark on a journey of ongoing development.
                </p>
                <p>
                    Our web-based platform seeks to offer educational materials, promote community cooperation, present coding competitions, link programmers to employment prospects, organize projects, offer guidance, and grant access to development resources.
                </p>
            </div>
        </div>
    </body>
</html>

Output:

NOTE*: The browser sets the values of column-width and column-count to auto by default if none of them are supplied.

Additional CSS Columns Properties

Let’s now give our columns some flair:

column-gap
column-fill
column-span
column-rule

1. column-gap:

The spacing between columns in a grid, flexbox, or multi-column layout is specified by the column-gap attribute.

Default value: normal

Syntax:

element{
            column-gap: initial| normal| length| inherit;
                }

NOTE*: A column-rule that exists between columns will show up in the center of the space between them.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>The CSS column-gap Property</title>
    <style>
        body{
            background-color: skyblue;
        }
        .cds {
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;

            -webkit-column-gap: 20px;
            -moz-column-gap: 20px;
            column-gap: 20px;
            /* Specifying Column Gap */
        }
        h1,
        h2 {
            text-align: center;
            color: blue;
        }
        h3{
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>
        Codershot: Cracking the code
    </h1>
    <h2>
        The CSS column-gap Property
    </h2>
    <h3>
        The space that exists between the element's columns is specified by the column-gap property:
    </h3>

    <!-- The text inside below div tag is divided in 
        4 columns with a gap of 20px between 
        the columns -->
    <div class="cds">
        Our objective is to prepare students for success in the quickly changing tech business by giving them useful skills that they can use in real-world situations. Our courses are made to provide you with the most up-to-date skills and information necessary to be creative and innovative. Our goal is to provide you with the resources you need to comprehend coding and embark on a journey of ongoing development. We welcome innovation as the engine of advancement. Our goal is to close the gap that exists between theory and reality. By consistently investigating novel innovations, trends, and best practices, we manage a position at the forefront of the rapidly changing IT industry. 
    </div>
</body>

</html>

Output:

2. column-fill:

The CSS column-fill property allows you to control whether or not the columns are filled evenly.

Default value: balance

Syntax:

element{
             column-fill: auto | balance | balance-all | initial | inherit; }

NOTE*: You have control over how the text fills the columns in a multi-column element if you provide a height. Either a balanced or sequential filling of the content is possible.

3. column-span:

An element’s maximum span across columns is determined by the CSS column-span property.

Default value: none

Syntax:

element{
              column-span: none| all| initial| inherit; }

4. column-rule:

The CSS column-rule property is used to define the color, style, and width of the rules that are placed in between columns.

This property can be used as a shorthand for:

column-rule-width
column-rule-style (required)
column-rule-color

Syntax:

element{
              column-rule: column-rule-width column-rule-style column-rule-color|
             initial| inherit; }

NOTE*: The text color will be used if column-rule-color is not specified.

Importance of CSS Columns

The flexibility of CSS columns to adjust to various screen sizes is one of its best features.
Media queries are not required for the multi-column layout to adapt to limited browser widths because it makes use of the CSS column shortcut attribute for both column width and column count.

Because of this, newspaper-style layouts can be made flexible and responsive, looking fantastic on all kinds of devices.

So why not try using CSS columns to achieve even greater effects in your website design?

0 0 votes

Course Rating