CSS3 Columns - Widows / Orphans
An interim solution to this is to add
display: inline-block
to the block level element you wish to avoid breaking across columns. I recently needed this for <li>
and <dl>
. Works well for either.
CSS column-count bug
Column layout exhibits the following default behavior (on Chrome 67):
- Regardless of the
column-count
setting, columns won't be wrapped unless they have at least 2 lines, except if ... - ... typesetting this way would result in at max half of the columns being used.
You can control the way columns get filled by specifying the CSS properties orphans
and widows
which specify the minimum number of lines a block container must show at the top or the bottom of a column, respectively.
A value of 1
allows for height balancing in columns even for text that would only span a single line.
Setting the value to an integer n
means that all used columns but the last one must contain at least n
lines of text. The default value is 2
for both properties.
Successively increasing the integer values leads to successively fewer layout columns used for any given text.
Demo
I've tried to set up a reproducible test setting container dimensions and font-sizes. As is it covers 6 columns. Removing any of the CSS properties 'orphans' or 'widows' causes layout in 3 columns only.
<!DOCTYPE html><html> <head> <title>CSS column count demo</title> <style type="text/css"> .wrapper { border: solid 1px black; font-family: Times New Roman; font-size: 12pt; width: 800px; height: 400px; } .wrapper p { column-count: 6; orphans: 1; widows: 1; } </style> </head> <body> <!-- The following text covers 6 columns. Removing any of the CSS properties 'orphans' or 'widows' causes layout in 3 columns only. --> <div class="wrapper"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod voluptatum nemo illum, numq</p> </div> </body></html>
CSS3 columns in Chrome with child DIV elements
Chrome is actually probably the one browser doing it correctly:
https://drafts.csswg.org/css-break/#widows-orphans
Name: orphans, widows
Value: <integer>
Initial: 2
IE 11, EDGE and Firefox (49) do not (yet?) support widows and orphans, even though http://caniuse.com/#feat=css-widows-orphans claims that IE11 and EDGE do support it - see https://jsfiddle.net/s7cfbqzt/13/ in IE11 and EDGE. If IE and EDGE actually would support it, they'd set the initial values to 1 instead of 2.
Fix for my use-case is to add
orphans: 1;
widows: 1;
to the container-class in CSS.
Thanks @Jay for taking the time to look into this!
Prevent widows - items alone in a row - when using css grid
A solution is to use flexbox instead of grid. This way it can stretch with the screen size.
We use 25%
for a 4 column layout. Subtracting 1rem
for a bit of margin. (0.5 left + 0.5 right)
(Open snippet in fullscreen to see it working)
.my-grid {
display: flex;
flex-wrap: wrap;
}
.card {
min-width: 264px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 1px #00000026;
font-size: 14px;
background-color: red;
margin: .5rem;
flex: 1 1 calc(25% - 1rem);
}
<div class="my-grid">
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">1</div>
<div class="card">blub</div>
</div>
Balance objects over two columns using CSS column-count: 2 in Chrome
Turns out that in Chrome CSS properties "orphans" and "widows" are set to a value of 2 by default, whereas other browsers seem to maintain a value of 1.
In order to fix the issue I described, the following CSS properties on #columncontainer should be added:
orphans: 1
widows: 1
This will prevent Chrome from trying to stick to one column.
For further reference:
- https://bugs.chromium.org/p/chromium/issues/detail?id=638530
- https://drafts.csswg.org/css-break/#widows-orphans
- https://drafts.csswg.org/css-break/#unforced-breaks
Excerpt of drafts.csswg.org:
If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.
Getting CSS columns to bunch on the left instead of spreading out
It seems your items has fixed sizes so you can use CSS grid to fix this. The trick is to create as many columns with fixed width as possible and span all of them using grid-column: 1/-1
body {
background-color: #c3dbff;
}
.wrapper {
display:grid;
grid-template-columns:repeat(auto-fit,250px); /* same as column width */
gap:10px; /* same as column gap */
}
.cols {
columns: 250px;
column-gap: 10px;
grid-column:1/-1; /* take all the columns of the grid*/
}
.thing {
display: inline-block;
width: 100%; /* use 100% and rely on the gap */
background: red;
margin-bottom: 10px;
break-inside: avoid-column;
color: white;
display: inline-grid;
place-content: center;
font-weight: bold;
font-family: sans-serif;
font-size: 50pt;
}
<div class="wrapper">
<div class="cols">
<div class="thing" style="height: 200px;">1</div>
<div class="thing" style="height: 200px;">2</div>
<div class="thing" style="height: 290px;">3</div>
<div class="thing" style="height: 280px;">4</div>
<div class="thing" style="height: 200px;">5</div>
<div class="thing" style="height: 230px;">6</div>
<div class="thing" style="height: 260px;">7</div>
<div class="thing" style="height: 210px;">8</div>
<div class="thing" style="height: 280px;">9</div>
<div class="thing" style="height: 230px;">10</div>
<div class="thing" style="height: 260px;">11</div>
<div class="thing" style="height: 210px;">12</div>
<div class="thing" style="height: 200px;">13</div>
<div class="thing" style="height: 270px;">14</div>
<div class="thing" style="height: 220px;">15</div>
<div class="thing" style="height: 260px;">16</div>
<div class="thing" style="height: 250px;">17</div>
<div class="thing" style="height: 290px;">18</div>
</div>
</div>
Related Topics
Label: Hover Attribute Triggers Incorrect Element in Ie10 and Ie11
Rails: Precompiled Assets Missing Node Modules
CSS3 Box-Shadow for Overlapping-Like Divs
Flex-Flow: Column Wrap. How to Set Container's Width Equal to Content
Polymer Chip-To-Card Pattern with Core-Animated-Pages and a Long List
Font-Awesome Caret Up and Caret Down Stacked on Top of Each Other
How to Create Tags Like Stackoverflow with Text Styling
What Is The Biggest Usable Number for Use in Calc() in CSS
Gray Out a Section of an Image with CSS
How to Have a Progress Bar Move from Right to Left Based on a Negative Value in Twitter Bootstrap
Does Pattern Lab "Not Mix Well" with Angular
Variable Height Scrolling Div, Positioned Relative to Variable Height Sibling
Is -Webkit-Link a Valid Color for Any HTML Element or CSS Property for Which Color Is Relevant
CSS Relative Positioning with Negative Value and Height
Media Query to Target Most of Smartphone
Does a CSS3 Animation Run When Parent Element Has Visibility: Hidden