CSS Column-count Property - W3docs

Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools

• Password Generator
• HTML Editor
• HTML Encoder
• Base 64
• Code Diff
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• JTW Decoder

CSS Maker

• CSS Maker
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face

Color Tools

• Color Picker
• Colors CMYK
• Colors HWB
• Colors HSL
• Color Hex
• Color mixer
• Color Converter
• Colors RGB
• Color Contrast Analyzer
• Color Gradient

String Tools

• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

Change theme

• Dark
• Light
• System

• CSS Basic CSS IntroductionCSS UsageCSS SyntaxCSS id and classCSS TextCSS FontCSS LinksCSS TablesCSS BorderCSS PaddingCSS MarginCSS Color NamesCSS Gradients
• CSS Guides Flexbox GuideCSS3 Properties
• CSS Selectors CSS Selectors*:active::after::before:checked:default:dir():disabled:empty:enabled:first-child::first-letter::first-line:first-of-type:focus:fullscreen:hover:in-range:indeterminate:invalid:lang():last-child:last-of-type:link:not():nth-child():nth-last-child:nth-last-of-type():nth-of-type:only-child:only-of-type:optional:out-of-range::placeholder:read-only:read-write:required:root:scope::selection:target:valid:visited
• CSS Properties align-contentalign-itemsallanimationalign-selfanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionappearancebackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizebleedblock-overflowborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-style
• border-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumnscolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfillfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-displayfont-familyfont-feature-settings@font-feature-valuesfont-kerning
• font-sizefont-size-adjustfont-language-overridefont-stretchfont-stylefont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-rendering@importinitial-letterisolationjustify-contentjustify-items@keyframesleftletter-spacingline-breakline-clampline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-height
• max-linesmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-breakpage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originplace-itemspointer-eventspositionquotesresizerightscroll-behaviorscrollbarshape-outsidespeakstrokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-widthtab-sizetable-layout
• text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-fill-colortext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-stroketext-stroke-colortext-stroke-widthtext-transformtext-underline-positiontoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiunicode-rangeuser-selectvertical-alignvisibilitywhite-spacewidowswidthwill-changeword-breakword-spacingword-wrapwriting-modez-indexzoom

CSS column-count Property ❮ Prev Next ❯

The column-count property specifies the number of columns which divides the content of an element.

The column-count property is one of the CSS3 properties.

It has two values: auto and number. "Auto" is the default value of this property. The number of columns is determined by other properties such as column-width. "Number" value specifies the number of columns into which the content of the element should be flowed.

Initial Value	auto
Applies to	Block containers except table wrapper boxes.
Inherited	No.
Animatable	Yes. The number of the columns is animatable.
Version	CSS3
DOM Syntax	object.style.columnCount = "4";

Syntax

column-count: number | auto | initial | inherit;

Example of the column-count property:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { -webkit-column-count: auto; /* Chrome, Safari, Opera */ -moz-column-count: auto; /* Firefox */ column-count: 3; } </style> </head> <body> <h2>Column-count property example</h2> <div> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </body> </html> Try it Yourself »

Result

Example of the column-count property with the column specified as 7:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { -webkit-column-count: 7; /* Chrome, Safari, Opera */ -moz-column-count: 7; /* Firefox */ column-count: 7; } </style> </head> <body> <h2>Column-count property example</h2> <div> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a great fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> </body> </html> Try it Yourself »

Values

Value	Description	Play it
auto	The number of columns is specified by other properties. This is the default value of this property.	Play it »
number	Specifies the number of columns in which the content of the elements should be written.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Browser support

50.0-webkit-	12.0-webkit-	52.0+ 1.5 -moz-	3.0 -webkit-	11.1+ 15.0 -webkit-

Practice Your Knowledge

What does the CSS 'column-count' property do? It sets the number of columns in a multi-column layout. It sets the gap between the columns in the layout. It sets the color of the columns in the layout. It sets the width of the columns in the layout. It controls how content overflows from its container. Correct! Incorrect! Submit

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

• CSS Basics

❮ Prev Next ❯

Related Resources

• CSS column-width Property
• CSS column-span Property
• CSS columns Property
• CSS column-fill Property
• CSS column-rule Property
• How to Display Unordered List in Two Columns

Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes

• PHP basics
• HTML Basics
• Javascript Basics
• CSS Basics
• ES6 Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Git Basics
• Vue.js Basics
• SQL Basics
• Python Basics
• Java Basics
• NodeJS Basics