How to use css column-fill attribute

css column-gap attribute definition and usage

In css, the column-gap attribute is usually separated from columns, column-count, etc. Properties are used together to set the distance between columns after the element content is divided into columns (multi-column layout)

css column-gap attribute syntax format

css Syntax: column-gap: length / normal; (Example: column-gap:36px;)

JavaScript syntax: object.style.columnGap="40px"

css column- gap attribute value description

length: the spacing between custom columns

normal: the normal gap between columns

Example

body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;}

.gap{column-count:3;column-gap:60px;}

.gap_normal{column-count:3;column-gap:normal;}

column-gap:60px;Demo, set the distance between columns to 60px

column-gap:normal; Demonstration, set the distance between columns to a normal distance!

Run result

The above is the detailed content of How to use css column-fill attribute. For more information, please follow other related articles on the PHP Chinese website!