Tag: columns

Web development

How to create equal height columns with CSS?

Post author By Lena Stanley
Post date July 9, 2021

CSSequal height columns — CSS Equal height columns.

How to create equal height columns with CSS?

If you want to achieve an equal height of columns (side by side), follow the steps below:

Demo:

Column 1

Some other text..

Column 2

Some other text..

Column 3

Some other text..

Step1.

Add HTML

Create the column container and add three columns:

<div class="column-container">
  <div class="column" style="background-color:#e9c46a">
    <h2>Column 1</h2>
    <p>Some other text..</p>
  </div>

  <div class="column" style="background-color:#2a9d8f">
    <h2>Column 2</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>

  <div class="column" style="background-color:#e9c46a">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Step2.

Add CSS

Set the display property values to “table” for the container, and “table-cell” for elements inside the container:

.column-container {
  display: table;
  width: 100%;
}
.column {
  display: table-cell;
  padding: 16px;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media only screen and (max-width: 600px) {
  .column { 
    display: block;
    width: 100%;
  }
}

Enjoy coding!

How to create a responsive three-column layout?

Tags columns, CSS

Web development

CSS Multi-column Layout

Post author By Lena Stanley
Post date July 7, 2021

Demo:

To create the Multi-column layout you can use the following properties:

To create multiple columns, use the CSS column-count property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-1 {
  column-count: 3;
}
</style>
</head>
<body>

<div class="text-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

To define the gap between columns, use the CSS column-gap property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-2 {
  column-count: 3;
  column-gap: 30px;
}
</style>
</head>
<body>

<div class="text-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

To define the style of the rule between columns, use the CSS column-rule-style property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-3 {
  column-count: 3;
  column-gap: 30px;
  column-rule-style: double;
}
</style>
</head>
<body>

<div class="text-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

To define the colour and width of the rule between columns, use the CSS column-rule-color property and CSS column-rule-width property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-4 {
  column-count: 3;
  column-gap: 30px;
  column-rule-style: double;
  column-rule-color: #2a9d8f;
  column-rule-width: 5px;
}
</style>
</head>
<body>

<div class="text-4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Define how many columns an element should span by using the CSS column-span property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-4 {
  column-count: 3;
  column-gap: 30px;
  column-rule-style: double;
  column-rule-color: #2a9d8f;
  column-rule-width: 5px;
}
.h4 {
  text-align: center;
  column-span: all;
    }

</style>
</head>
<body>

<div class="text-4">
<h4 class="h4">Lorem Ipsum Dolor Sit Amet</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Lorem Ipsum Dolor Sit Amet

To define the column width, use the CSS column-width property:

<!DOCTYPE html>
<html>
<head>
<style>
.text-5 {
  column-width:150px;
}

</style>
</head>
<body>

<div class="text-5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
</div>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS Grid

CSS Flexbox

CSS Selectors

Tags column-count, column-rule-color, column-rule-style, column-rule-width, column-span, columns, CSS

Web development

CSS column-rule-color Property

Post author By Lena Stanley
Post date July 7, 2021

The CSS column-rule-color property defines the color of the rule between columns.

Syntax:

column-rule-color: color;

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.text {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-color: #e76f51;
}
</style>
</head>
<body>

<h4>The column-rule-color Property:</h4>

<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

The column-rule-color Property:

Enjoy coding!

Read also:

CSS column-span Property

CSS column-width Property

Tags column-rule-color, columns, CSS

Web development

CSS column-span Property

Post author By Lena Stanley
Post date July 7, 2021

The CSS column-span property defines how many columns an element should span across.

Syntax:

column-span: none|all;

none (default) – the element span across one column.

all – the element span across all columns.

Demo (column-span: none, and all) :

Click the “Try it” button to make the h4 element span over all columns:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.text {
  column-count: 3;
}

.heading {
  column-span: all;
  text-align: center;
}
</style>
</head>
<body>

<div class="text">
<h4 class="heading">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Let the <h4> element span across all columns:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Enjoy coding!

Read also:

CSS Columns property

CSS border-collapse Property

Tags column-span, columns, CSS

Web development

CSS Columns property

Post author By Lena Stanley
Post date July 5, 2021

The CSS columns property is a shorthand property for:

CSS column-width property

CSS column-count property

Syntax:

columns: auto|column-width column-count;

auto (default) – sets both the column-width and column-count to “auto”.

column-width – specifies the minimum width for each column.

column-count – specifies the maximum number of columns.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.text {
  columns: 100px 3;
}

</style>
</head>
<body>

<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>

</body>
</html>

Output:

Set the minimum width for each column to 100px, and the maximum number of columns to 3:

Enjoy coding!

Tags coloumn-count, column-width, columns, CSS