CSS | Column-width Property - GeeksforGeeks

Trang chủ » Html Css Column Width » CSS | Column-width Property - GeeksforGeeks

Có thể bạn quan tâm

The columns-width property in CSS is used to define the width of the columns. The minimum number of columns are required to show the content across the element. It is a flexible property. If the browser cannot fit at least two-columns at a given column-width then the two columns will be put into a single column.

Syntax:

column-width: auto|length|initial|inherit;

Property Values:

  • auto: It is the default value. The browser determines the width of the columns.
  • length: It is used to specify the width of the columns in terms of length. The length can be set in the form of px, cm etc.
  • initial: It is used to set the column-width property to its default value.
  • inherit: It is used to set column-width property from its parent.

Example: In this example, we are using column-width: auto property.

html <!DOCTYPE html> <html> <head> <title> CSS column-width Property </title> <style> .gfg{ /* For Chrome, Safari, Opera browsers */ -webkit-column-width:auto; /* For Firefox browser */ -moz-column-width:auto; column-width:auto; } </style> </head> <body> <h2> The column-width Property </h2> <div class="gfg"> The course is designed for students as well as working professionals to prepare for coding interviews. This course is going to have coding questions from school level to the level needed for product based companies like Amazon, Microsoft, Adobe, etc. </div> </body> </html>

Output:

Example: In this example, we are using column-width: lengthproperty.

html <!DOCTYPE html> <html> <head> <title> CSS column-width Property </title> <style> .gfg{ /* For Chrome, Safari, Opera browsers */ -webkit-column-width:100px; /* For Firefox browser */ -moz-column-width:100px; column-width:100px; } </style> </head> <body> <h2> The column-width Property </h2> <div class="gfg"> The course is designed for students as well as working professionals to prepare for coding interviews. This course is going to have coding questions from school level to the level needed for product based companies like Amazon, Microsoft, Adobe, etc. </div> </body> </html>

Output:

Example: In this example, we are using column-width: initial property.

html <!DOCTYPE html> <html> <head> <title> CSS column-width Property </title> <style> .gfg{ /* For Chrome, Safari, Opera browsers */ -webkit-column-width:initial; /* For Firefox browser */ -moz-column-width:initial; column-width:initial; } </style> </head> <body> <h2> The column-width Property </h2> <div class="gfg"> The course is designed for students as well as working professionals to prepare for coding interviews. This course is going to have coding questions from school level to the level needed for product based companies like Amazon, Microsoft, Adobe, etc. </div> </body> </html>

Output:

Supported Browsers: The browser supported by column-width property are listed below:

  • Google Chrome 50.0 and above
  • Edge 12.0 and above
  • Internet Explorer 10.0 and above
  • Firefox 50.0 and above
  • Opera 11.1 and above
  • Safari 9.0 and above

CSS column-width Property – FAQs

What does the column-width property do in CSS?

The column-width property in CSS specifies the ideal width of each column in a multi-column layout. It helps define the size of the columns before the browser decides how many columns can fit within the container.

How does column-width differ from column-count?

Column-width defines the width of the columns, while column-count determines the number of columns. When used together, column-width sets the minimum width and column-count adjusts to fit the available space.

How do I set a specific column width?

You can set a specific width using: column-width: 200px;. This instructs the browser to create columns that are at least 200px wide, depending on available space.

Can column-width be responsive?

Yes, you can use media queries to adjust column-width for different screen sizes, ensuring that content is presented optimally across devices.

What happens if the container width is less than the column-width?

If the container width is smaller than the specified column-width, fewer columns will be displayed, or in some cases, only a single column will fit, depending on the layout.

Comment More info Next Article CSS content Property

M

ManasChhabra2 Follow Improve

Từ khóa » Html Css Column Width