CSS3 Columns - Widows/Orphans

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):

  1. Regardless of the column-count setting, columns won't be wrapped unless they have at least 2 lines, except if ...
  2. ... 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



Leave a reply



Submit