A CSS Multi-column Layout Tutorial for Beginners-CSS Tutorial-php.cn

A CSS Multi-column Layout Tutorial for Beginners

Introduction to CSS Multi-Column Layout Tutorial: Key Points

The CSS multi-column layout module allows developers to create responsive multi-column layouts, which can produce good results on various screen sizes. The column-count attribute specifies the number of columns, and the column-width attribute specifies the width of each column. Both can be set to auto or positive numbers, and can be set at the same time using the abbreviation columns attribute.
column-gap attribute specifies the column spacing, and the column-rule attribute is abbreviated form, allowing us to add dividers between columns. The column-fill attribute determines how content is allocated to fill columns, and the column-span attribute controls how elements span multiple columns.
In order for the layout to display well on all screen sizes, both column-count and column-width should be specified. Using media queries can help solve problems such as horizontal scrolling or excessive column lengths. Legacy browsers that do not support multi-column functionality will be elegantly downgraded to single-column layouts.

Long text lines may be more laborious to read, and readers pay more attention to the non-missing lines rather than the text content itself. This problem can be easily solved using multi-column layout. Multi-column layouts are very common in print media. The functionality of the CSS multi-column layout module enables us to reproduce the same multi-column effect on the website.

One of the difficulties in using multi-column layouts in web design is the inability to control the document size. In this tutorial, I will teach you how to create a responsive multi-column layout that will perform well on a variety of screen sizes. We will start with the basics and then gradually learn more complex concepts.

Browser support

If you are willing to use prefixes, browser support for multi-column layouts is very good. According to statistics from the Can I use website, this feature is supported in 95.32% of browsers worldwide. Some browsers (such as IE10, Edge, and Opera Mini) fully support multi-column layouts. Other browsers such as Firefox and Chrome require prefix.

If you need to support older browsers (usually IE9 and below), you can use the old polyfill. Of course, if the browser does not support the multi-column function, the layout will be elegantly downgraded to a single-column layout. So, polyfill may not be the best option in this case.

The CSS multi-column layout module has many different properties. In the following sections, I will introduce them one by one.

Number of columns and column width

The

column-count attribute specifies the number of columns to be set for the element. You can set it to auto or a positive number. When set to auto, the number of columns will be determined by the column-width attribute. If set to a positive number, all columns have equal widths.

The

column-width attribute specifies the width of each column of the element. This is not strictly followed. For example, if there is insufficient available space, the column can be narrower. This property can also be set to a auto value or a positive number. If set to auto, the width will be determined by the column-count attribute. The free space is evenly distributed across all columns.

Alternatively, you can set both values at the same time using the abbreviation columns attribute. The syntax of the columns attribute is as follows:

.example {
  columns:  || 
}

Copy after login

Some usage examples of this property are shown below, along with explanations next to each example:

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

Copy after login

As you can see, the first columns definition is the abbreviation of the fourth, and the second is the abbreviation of the third. Basically, if an integer does not allocate any units, it is parsed to column-count.

This is a CodePen demonstration to demonstrate the features discussed so far

If you resize the window, you will notice the following:

column-count property always makes the number of columns equal to the value you specified. The only thing that changes is the width of the column.
column-width attribute automatically changes the number of columns based on the available space. The number of columns is adjusted by making the column width larger than the specified value. It may also adjust the width of all columns to a smaller value if there is insufficient free space.
columns attribute uses the column-count value as the limit for the maximum number of columns allowed. It adjusts the width in such a way that column-count will never exceed the count limit, and column-width is also very close to the specified width.

Column spacing and column rules

The

column-gap attribute allows us to specify the amount of space between columns. You can set it to normal or length value. It can be zero, but not negative. When you set it to normal, it uses the default spacing between the columns defined by the browser.

The

column-rule attribute is an abbreviation that allows us to add dividers between columns. This is similar to using the border-left or border-right attributes. This property follows the following syntax:

.example {
  column-rule:  ||  || 
}

Copy after login

For column-rule-width, you can specify the width as a length (for example 3px) or use keywords (for example thin, medium, or thick). column-rule-styleAccept values such as dashed, dotted, solid. You can use all valid values of the border-style attribute with column-rule-style, which can be any valid color value. column-rule-color

This is a CodePen demonstration where these properties are used together

Column fill and column span The

attribute determines how to assign content to fill the columns. This property can be set to column-fill or auto. When set to balance, the columns are populated in order. Use auto to make sure the content is evenly distributed among all columns. balance

It is important to note that if you set a fixed height for column elements, Firefox will automatically balance the content. However, other browsers will start populating the columns in order.

column-span Attributes control how elements span multiple columns. It has two possible values: all or none. When set to all, the element spans all columns. This property is not supported in Firefox.

This is a CodePen demonstration that "spans" a blockquote element across all columns

In Firefox, blockquote ends up in the middle column, which may be an acceptable fallback.

Create responsive layouts with multiple columns

Now that you have learned about the different properties and possible values, let's focus on how to keep the layout responsive and user-friendly.

column-count and column-width have their own problems. Although column-count can control the number of columns on larger devices, layout on smaller devices will be interrupted. Similarly, column-width will ensure that the columns are not too narrow on smaller devices, but will result in many columns on larger devices.

To make sure your layout is displayed well on all screen sizes, you should specify both column-count and column-width. This way, you can control the width and number of columns. However, you may still need to fix some issues, which we will discuss next.

Fix horizontal scrolling

If you specify a fixed height for the column, shrinking the viewport will cause a horizontal scroll bar to appear. Since the content cannot be expanded vertically, it will grow horizontally. To resolve this issue, you can resize your browser to see how wide the horizontal scrollbar appears for the first time. You can then use a media query to set the height of the column below that width to auto. Here is the code to do this:

.example {
  columns:  || 
}

Copy after login

This CodePen demonstration shows the problem and possible solutions

Resize the window to see how both examples respond.

Fixed too long column

If your column is too long, users will have to keep scrolling up and down to read everything, which can be annoying. When the height of the column is greater than the viewport height itself, it is best to remove multiple columns. This can be done again using media query:

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

Copy after login

In this case, I only use multiple columns when the viewport width allows the user to no longer need to scroll up and down.

View demo with multiple columns and media queries

Conclusion

I hope this introductory tutorial for CSS multi-column layout modules will familiarize you with this feature. These properties can be added nicely to your responsive design toolbox, and if you still need to support older browsers, multiple columns will often be elegantly downgraded to single columns.

FAQ for CSS Multi-Column Layout

How to create a multi-column layout in CSS?

Creating multi-column layouts in CSS is very simple. You can use the column-count property to specify the number of columns you want in the layout. For example, if you want three columns, you can write:

.example {
  columns:  || 
}

Copy after login

In this example, .container is the class of the elements you want to divide into columns. The column-count attribute will automatically divide the content of the element into the specified number of columns.

How to control the spacing between columns in CSS?

The

column-gap property allows you to control the space between columns. The value you set for this property will be the width of the gap. For example, if you want a 20px gap between columns, you can write:

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

Copy after login

Can I create columns of different widths in CSS?

Unfortunately, the CSS multi-column layout module does not support columns of different widths. All columns created with the column-count attribute will have the same width. However, you can use other CSS techniques such as Flexbox or Grid to create columns of different widths.

How to control column width in CSS?

You can use the column-width attribute to control column width. This property specifies the optimal width of the column, but the browser adjusts the width if necessary to fit the content. For example, to set the column width to 200px, you could write:

.example {
  column-rule:  ||  || 
}

Copy after login

How to create column rules in CSS?

The

column-rule property allows you to create rules or lines between columns. You can specify the width, style, and color of the rule. For example, to create a 1px solid black rule, you can write:

.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}

Copy after login

How to control column interrupts in CSS?

The

break-inside property allows you to control column interrupts. You can set this property to avoid to prevent interrupts within the element. For example:

@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}

Copy after login

Can I use multi-column layouts with responsive design?

Yes, you can use multi-column layouts with responsive designs. You can use media queries to adjust the number of columns based on viewport width. For example, you might want to display one column on a small screen and three columns on a large screen.

How to populate columns in CSS?

By default, columns are populated in order. This means first fill in the first column, then the second column, and so on. However, you can change this behavior using the column-fill attribute. If you set this property to balance, the browser will try to fill the column evenly.

How to cross columns?

The

column-span attribute allows elements to span multiple columns. You can set this property to all to make the element span all columns. For example:

.container {
  column-count: 3;
}

Copy after login

Is there any browser compatibility issue with CSS multi-column layout?

Most modern browsers support CSS multi-column layout, but there may be some differences in implementation. It is best to test your layout in a different browser to make sure it works as expected. You can also use tools such as Can I Use to check browser support for different CSS properties.

The above is the detailed content of A CSS Multi-column Layout Tutorial for Beginners. For more information, please follow other related articles on the PHP Chinese website!