Articles
Introduction to CSS
CSS Properties Related to Column Layout

CSS Properties Related to Column Layout

This article explains the CSS properties related to column layout.

You can learn how to describe column layouts.

YouTube Video

HTML for Preview

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre>
26&lt;section class=&quot;columns-container&quot;&gt;
27    &lt;h5&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.&lt;/h5&gt;
28    &lt;p&gt;1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.&lt;/p&gt;
29    &lt;p&gt;2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.&lt;/p&gt;
30    &lt;p&gt;3. Pellentesque malesuada diam eu sem finibus scelerisque.&lt;/p&gt;
31    &lt;p&gt;4. Integer eget dolor nec est dignissim fermentum ut eget nunc.&lt;/p&gt;
32    &lt;p&gt;5. Morbi in nibh in lorem vestibulum sollicitudin.&lt;/p&gt;
33&lt;/section&gt;
34</pre>
35                <header><h4>HTML+CSS</h4></header>
36                <section class="sample-view">
37                    <section class="columns-container">
38                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
39                        <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
40                        <p>2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
41                        <p>3. Pellentesque malesuada diam eu sem finibus scelerisque.</p>
42                        <p>4. Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
43                        <p>5. Morbi in nibh in lorem vestibulum sollicitudin.</p>
44                    </section>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>order</h3>
50            <section style="height: 300px;">
51                <header><h4>column-width: 250px</h4></header>
52                <section class="sample-view">
53                    <div class="container">
54                        <div class="item item-1">Item 1</div>
55                        <div class="item item-2">Item 2</div>
56                        <div class="item item-3">Item 3</div>
57                    </div>
58                </section>
59            </section>
60        </article>
61    </main>
62</body>
63</html>

Column Layout

columns 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

The CSS columns property provides a convenient way to display content divided into multiple columns. With a single declaration, you can easily set the column width and number of columns, making it suitable for responsive design. It is particularly effective when a layout is required where text is displayed long vertically and arranged in multiple columns, such as in newspapers or magazines.

  • In this example, content is divided into 3 columns with a 20px gap and a 2px rule between columns. Additionally, the h5 element spans across multiple columns.

columns is a shorthand for the column-width and column-count properties.

Syntax of the columns Property 

1columns: <column-width> <column-count>;

columns follows this format.

  • <column-width>: Specifies the width of each column. auto, px, %, and other length units can be used as values.
  • <column-count>: Specifies the number of columns as a numeric value.
column-width Property 
1.container {
2  column-width: 250px;
3}

column-width is a property that specifies the minimum width of each column. When used with column-count, automatic placement and adjustment of columns become possible. The browser takes the width of the container into account and automatically calculates the required number of columns.

  • In this example, the width per column is 250px, and the optimal number of columns is calculated based on the container's width.
column-count Property 
1.container {
2  column-count: 3;
3}

column-count is a property that explicitly sets how many columns the specified element is divided into. Unlike column-width, this fixes the number of columns.

  • In this example, the content within the container is divided into three columns.
column-gap Property 
1.container {
2  column-gap: 20px;
3}

column-gap is a property that specifies the space (gap) between each column. There is also a common property with CSS Grid called gap, but column-gap is useful when you want to customize only the margins between columns.

  • In this example, there is a 20px margin between each column. The default value is 16px.
column-rule Property 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule is a property for drawing lines between columns. It has a syntax similar to the border property and allows you to specify the width, style, and color of the line.

  • In this example, a solid black line with a width of 2px is shown between columns. column-rule can be broken down into the following three properties.
    • column-rule-width: Specifies the width of the line.
    • column-rule-style: Specifies the style of the line. For example, there are solid, dashed, dotted, etc.
    • column-rule-color: Specifies the color of the line.
column-span Property 
1h5 {
2  column-span: all;
3}

column-span is a property that sets a specific element to span across multiple columns. It is mainly used for elements such as headings or titles. There are two possible values:. - none: The element does not span columns and fits within one column. This is the default value. - all: The element is displayed spanning all columns.

  • In this example, the h5 element is displayed spanning multiple columns.
column-fill Property 
1.container {
2  column-fill: balance;
3}

column-fill is a property that controls how content is distributed across columns. Normally, columns are filled as evenly as possible, but this property allows you to specify a different arrangement. The following values are available:. - balance: Contents are arranged to fill columns evenly. This is the default value. - auto: Columns will automatically be filled. The last column may become longer.

  • This setting adjusts so that content is evenly distributed.
Using with Media Queries 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

The columns property can be combined with media queries to support responsive design. You can flexibly change the number of columns and column widths depending on different screen sizes.

  • In this example, when the screen width is 600px or less, there will be 1 column. For wider screens, it will be divided into 3 columns with a width of 200px each.

Summary

The CSS columns property is a powerful tool to easily implement layouts using multiple columns. It is particularly useful for responsive design and text layouts that prioritize readability. By combining related properties, you can flexibly customize the number and width of columns, gaps, decorations, etc.

This allows for easy implementation of more sophisticated designs, so please take advantage of it.

order 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

The CSS order property is used to control the display order of elements when using Flexbox or Grid layouts. Normally, elements are rendered according to the HTML markup, but you can change their visual order by using the order property. This property helps in designing flexible user interfaces and building responsive designs.

  • In this example, the items are marked up in HTML as Item 1, Item 2, Item 3, but the display order changes to Item 2, Item 3, Item 1 due to the CSS order property.

Basics of the order Property

The order property is applied to items within Flexbox or Grid containers. You define the order of placement by setting integer values for each item. By default, the order of all items is set to 0. By changing this value, you can specify the order in which items are displayed.

Basic Syntax 
1.item {
2  order: <integer>;
3}
  • You can specify any integer for the order value. Positive, negative, or zero values can be used. The smaller the value, the earlier the element is displayed, and the larger the value, the later it is displayed.

Using Positive and Negative Values

You can also assign negative values to the order property. Elements with negative values are displayed before the default order.

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

In this example, Item 1 is displayed first because its order is set to -1. In contrast, Item 3 is displayed next with an order of 1, followed by Item 2 with an order of 2.

order in Responsive Design

In responsive design, it is possible to change the order of elements according to screen size. For example, in mobile view, you can change the order of elements to display important information first.

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

In this example, in the normal view, items are displayed in the order of Item 1, Item 2, Item 3, but when the screen width is below 600px, Item 2 appears first, Item 3 next, and Item 1 last.

Considerations for order

Using the order property can result in a visual order that differs from the order in the DOM tree. This can affect accessibility tools, such as screen readers. When the order changes, keyboard navigation and other assistive technologies may not behave as expected. Therefore, it is necessary to carefully consider the impact on user experience when using order.

Conclusion

The CSS order property is a powerful tool that allows you to easily control the display order of elements in Flexbox or Grid layouts. By using positive or negative values, you can flexibly change the order of elements, which is particularly useful in responsive design. However, attention must be paid to accessibility and the divergence between visual order and HTML structure. If these are properly considered, the order property can be useful for creating more dynamic and flexible layouts.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS properties related to grid layout