Difference between revisions of "CSS/C4/Multi-column-Layout-in-CSS/English"

• How to create a Multi-column Layout in CSS

System Requirements

• Ubuntu Linux OS v 18.04
• CSS3
• HTML5
• gedit Text Editor and
• Firefox web browser

However you may use any other editor or browser of your choice.

https://spoken-tutorial.org

If not, please go through the HTML and CSS tutorials on this website.

Please download and extract them.

Make a copy and then use them while practising.

• It is used mostly for creating layouts for newspapers, magazines, etc.
• It is created and styled using the CSS column properties.

Let us understand these using some examples.

The same is provided in the Code files link for practice.

I have opened it in the gedit Text Editor.

Highlight all

I have opened it in the gedit Text Editor.

Highlight: body property

Now open the file Mycolumn.html in a web browser.

I have opened it in the Firefox web browser.

Highlight the text

We see a paragraph displayed without any formatting.

Now I will apply all the column properties to this page.

• column-width property is used to set the width of every column.
• It also controls the number of columns

Let us try this.

Type: <div class="col">

Type: </div>

Next to the body tag, add the div tag with the class col.

Then before the body closing tag, close the div tag.

Type:

.col {column-width: 400px;}

Next to the body tag, type the code as shown.

Here I have set the width to 400 pixels

Highlight the output

In my case, the content is divided into two columns.

It may vary in your case, as it depends on the size of the browser.

Press Ctrl and minus keys together to increase the no. of columns.

If we press Ctrl & + keys together the number of columns will decrease accordingly.

• column-count property is used to divide the element into a number of columns.

Let us try this.

Update:

.col {column-count: 2;}

Highlight: column-count: 2;

Highlight the output

Now the content is divided into two columns.

Press Ctrl and minus keys or Ctrl and plus keys together.

The number of columns will remain as it is.

Highlight: column-count: 2;

• column-gap property is used to set the gap between columns.

Let us try this.

Type:

column-gap: 50px;

I have set a gap of 50 pixels between the columns.

Highlight the output

50 pixel gap is set between the columns.

• column-rule-style property is used to display a ruler between the columns.
• Rulers can be styled as solid, dotted, dashed, etc.

Let us try this.

Type:

column-rule-style: solid;

I have set a solid ruler between the columns.

Highlight the output

A solid ruler is inserted between the columns.

• column-rule-width property is used to set the width of ruler between columns.
• This property works after specifying column-rule-style property.

Let us try this.

Type:

column-rule-width: 5px;

I have set the width of the line to 5 pixels.

The width of the line is increased

• column-rule-color property is used to set the color of ruler between columns.
• This property works after specifying column-rule-style property.

Let us try this.

Type:

column-rule-color: blue;

Inside the class “col”, next to the column-rule-width property, type the code as shown.

Blue color is set for the ruler.

• column-rule is shorthand property for setting style, width and color of ruler.

Let us try this.

Update:

.col { column-count: 2; column-gap: 50px; column-rule: solid 3px red; }

Highlight:

column-rule: solid 3px red;

Highlight the output

Ruler is set between the columns having style solid, width 3 pixels and color red.

• column-span property is used to stretch an element across columns.
• Its values are: none, all, initial and inherit.
• Its default value is none.

Let us try this.

Type:

<h1> Spoken Tutorial </h1>

Type:

h1 {text-align: center;}

I have set the h1 heading to centre align.

Highlight the output

Heading is added to the first column not to the whole page.

Highlight:

<div class="col">

<h1>Spoken Tutorial</h1>

Here the default column-span value is none.

Type:

column-span: all;

I have set the column-span to all.

Highlight the output

Now the heading spans across all the columns.

Likewise we can customise our web page content using CSS column properties, as required.

Let us summarize.

• Multi-column Layout in CSS

• Open the file webpage.html which you have created earlier.
• Add some content more than 10 lines.
• Open the file styles.css which you have created earlier.
• Divide the content into 4 columns.
• Using shorthand add a dotted red 4px ruler.

• Link the styles.css file to webpage.html file.

• Observe the output.

Please download and watch it.

For more details, please write to us.

Thank you for watching