how to use css multi column

Posted under CSS3 Course On By mohammed.mutawe

CSS multi column

The CSS column is one of the things that is not hidden from this language in the design, as it is a good feature to support large screens while reading a large number of lines, and this idea depends on dividing a large text into a group of texts in the same context as paper magazines.

 

Definition

column-count:2;
column-gap: 70px;

</pre >

Where column count denotes the number of columns we want to split the text into, and column gap denotes the empty spaces between the two columns.

 

Benefits

There are many benefits in dividing texts into columns, namely:

    • Give aesthetic content to potential visitors to our page.
    • Ease of finding words while analyzing text.
    • Keep visitors away from feeling bored while reading.
    • Support for large screens by providing additional reading spaces.

 

Example

Please, to understand CSS multi column well, copy the following codes and run it in your browser.

CSS

div{

    column-count:3;
    column-gap: 100px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Multi Columns</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.

            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.
        </div>
    </body>

</html>