CoderShot

Rate this post

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.

CSS columns

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 VALUEDESCRIPTION
autoThe default value. Sets the column-count and column-width to “auto”.
inheritcarries over the values for column-width and column-count from its parent element.
initialSets 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?

READ ALSO: ADVANTAGES AND DISADVANTAGES OF CSS.

0 0 votes
Course Rating

Share:

More Posts

Send Us A Message

A Simple Calculator in C: Understanding Basic Operations

A Simple Calculator in C: Understanding Basic Operations

In the world of programming, creating a calculator or menu-driven program is a rite of passage for many beginners. It’s …

Read more

Swapping Variables in C: A Beginner’s Guide

Swapping Variables in C: A Beginner’s Guide

In the world of programming, the need of swapping variables is a common occurrence. Whether you’re working on a simple …

Read more

Understanding Post-Decrement and Pre-Decrement in C Programming

Understanding Post-Decrement and Pre-Decrement in C Programming

In this blog post, we’ll explore the difference between post-decrement and pre-decrement using a simple C code example. C programming …

Read more

0
Would love your thoughts, please comment.x
()
x