column-width
Quick Summary for column-width
column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.
Code Usage for column-width
/* Keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* Global values */ column-width: inherit; column-width: initial; column-width: revert; column-width: unset; More Details for column-width
column-width
The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.
This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are width, column-width, column-gap, and column-rule-width.
Syntax
/* Keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* Global values */ column-width: inherit; column-width: initial; column-width: revert; column-width: unset; The column-width property is specified as one of the values listed below.
Values
<length> Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.
auto The width of the column is determined by other CSS properties, such as column-count.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | Block containers except table wrapper boxes |
| Inherited | no |
| Computed value | the absolute length, zero or larger |
| Animation type | a length |
Formal syntax
<length> | auto
Examples
Setting column width in pixels
HTML<p class="content-box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> .content-box { column-width: 100px; } Specifications
| Specification |
|---|
| CSS Box Sizing Module Level 3 # column-sizing |
| CSS Multi-column Layout Module Level 2 # cw |
See also
Multiple-column Layout (Learn Layout) Basic Concepts of MulticolLast modified: Feb 19, 2022, by MDN contributors
Select your preferred language English (US)DeutschFrançais日本語 Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986
