CSS Column Breaks

CSS column breaks?

Here's what the problem is - no column break after "The header" in Safari and Firefox:
Sample Image

According to this, this and this the column breaks don't work as yet.

Insert column break in css3 column

The way to break columns is to wrap the elements with a block element, here done with a div

I also removed the margins since they affect how that break renders

section {  -webkit-columns: 2;  -moz-columns: 2;  columns: 2;  width: 100%;}section * {  margin: 0;}section div {  -webkit-column-break-inside: avoid;  page-break-inside: avoid;  break-inside: avoid;}
<section>  <div>    <h2>text1</h2>    <p>text1</p>    <p>text1</p>
<h2>text2</h2> <p>text2</p> <p>text2</p>
<h2>text3</h2> <p>text3</p> <p>text3</p> </div> <div> <h2>text4</h2> <p>text4</p> <p>text4</p> </div></section>

How can I insert column break in a CSS multi-column layout?

I was thinking about this and came up with another solution. Basically the problem is that multi columns breaking is not supported so it's not possible to create those fixed columns and dynamic columns with just css for all browser at the moment.
Therefore I decided to split the problem into two. I separate the items into groups based on the fixed breaks. And I assume each group will be one column for starters. Then I see how many columns I have. If it's less than 4 (the number of the columns you want) then I allow the largest group to break into one more column dynamically. I continue this until I reach the total of 4 columns - be it fixed, or dynamic, or both.

See the snippet below.

Also, play with the snipped by adding, removing or moving the breaks. It should work for many different scenarios.

let items = [  {title: 'Category 1', type: 'menu-item'},  {title: 'Category 2', type: 'menu-item'},  {title: '---cb---', type: 'column-break'},  {title: 'Category 3', type: 'menu-item'},  {title: 'Category 4', type: 'menu-item'},  {title: 'Category 5', type: 'menu-item'},  {title: 'Category 6', type: 'menu-item'},  {title: 'Category 7', type: 'menu-item'},  {title: 'Category 8', type: 'menu-item'},  {title: 'Category 9', type: 'menu-item'},  {title: '---cb---', type: 'column-break'},  {title: 'Category 10', type: 'menu-item'},  {title: 'Category 11', type: 'menu-item'},  {title: 'Category 12', type: 'menu-item'},  {title: 'Category 13', type: 'menu-item'},  {title: 'Category 14', type: 'menu-item'},  {title: 'Category 15', type: 'menu-item'},  //{title: '---cb---', type: 'column-break'},  {title: 'Category 16', type: 'menu-item'},  {title: 'Category 17', type: 'menu-item'},  {title: 'Category 18', type: 'menu-item'},  {title: 'Category 19', type: 'menu-item'},  {title: 'Category 20', type: 'menu-item'},  {title: 'Category 21', type: 'menu-item'}];
const $menu = document.querySelector('.menu');
var allGroups = [];var currentGroup = 0;allGroups.push({ items: [], columns: 1});
function addGroup($menu, group, numberOfColumns){ let columnItem = document.createElement("div"); columnItem.classList.add('menu-group'); if(numberOfColumns === 1){ columnItem.classList.add('fixed'); } else { columnItem.classList.add('dynamic-columns'); var style = '-webkit-column-count: ' + numberOfColumns + ';'; style += '-moz-column-count: ' + numberOfColumns + ';'; style += 'column-count: ' + numberOfColumns + ';'; columnItem.setAttribute('style', style); } group.forEach((groupItem) => { columnItem.appendChild(groupItem); }); $menu.appendChild(columnItem); };var columnsCount = 1;items.forEach((item) => { let nodeItem = document.createElement("div"); allGroups[currentGroup].items.push(nodeItem); nodeItem.classList.add('menu-item'); let nodeItemText = document.createTextNode(item.title); nodeItem.appendChild(nodeItemText); if (item.type === 'column-break') { nodeItem.classList.add('menu-item--column-break'); //addGroup($menu, currentGroup, 1); currentGroup++; allGroups.push({ items: [], columns: 1}); columnsCount++; } });
var forSorting = [];allGroups.forEach((item) => { forSorting.push(item); });
while(columnsCount < 4){ forSorting.sort(function(a, b){ return (b.items.length/b.columns) - (a.items.length/a.columns); }); forSorting[0].columns++; columnsCount++;}
allGroups.forEach((item) => { addGroup($menu, item.items, item.columns);});
.menu {  position: relative;  padding: 0 16px;  display: flex;  flex-direction: row;}
.menu-group:not(:last-child){ border-right: 1px solid #e2e1e1; margin-right: 8px;}
.menu-group.fixed { flex-basis: calc(25% - 8px); flex-grow: 0; flex-shrink: 0;}
.menu-group.dynamic-columns { flex-grow: 1; -moz-column-rule: 1px solid #e2e1e1; column-rule: 1px solid #e2e1e1;}
.menu-item--column-break { display: block; color: red;}
<div class="container">  <div class="menu">  </div></div>

Is there a solution for CSS column breaks that works in both Firefox and Chrome

You could use flexbox to keep the children of .three_col in a single row like this:

.three_col {  display: flex;}.keep_together {  margin: 20px;  flex: 1;}
<div class="three_col"><div class="keep_together"><h2 style="color: #02b4f0;">Location 1</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p></div><div class="keep_together"><h2 style="color: #62bb47;">Location 2</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p></div><div class="keep_together"><h2 style="color: #ef3781;">Location 3</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p></div></div>

Section breaks for very long CSS columns

There's actually a pretty simple solution using CSS columns. And the column-span attribute.

You can achieve all of this WITHOUT injecting anything into the content and simply styling HTML tags.

Basically, the CSS Columns Layout Module is intended to replicate print design layouts (like a newspaper) where the stylistic rule is that headlines should cross all columns of a story. Therefore any element with column-span: all will separate columns and cause the wrapping to reset. (notice the colors in my example show the wrap).

In this case, since you don't control the content its best to provide a common structure to your users. For example, I'd set H1, H2, H3 tags as well as <hr> and maybe some images to break columns. Allow your users to implement these tags as they normally would in writing and you'll achieve a nice layout. However, if they decide NOT to implement any of that stuff, that's up to them and you should let it wrap and cause a long scroll. (I might also suggest providing a preview so they can see what the result will look like)

Example of column-span

.columns { margin: 30px; columns: 2;}
h1, h2, h3, h4, h5 { column-span: all;}

// simply to show where things wraph2 { background-color: #eee; padding: 5px 10px;}
h5 { border-bottom: 1px solid #ddd; padding-bottom: 5px; text-align: center;}
p:nth-of-type(1) { color: blue;}
p:nth-of-type(2) { color: green;}
p:nth-of-type(3) { color: orange;}p:nth-of-type(4) { color: teal;}
<div class="columns"> <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis tellus non nunc tincidunt, vitae rutrum metus dapibus. Fusce at ante massa. Nam et nibh aliquet, porta nibh quis, rhoncus tortor. Aenean vestibulum neque sed urna lacinia aliquet.  Vestibulum facilisis egestas commodo. Cras sed maximus odio. Mauris posuere, ante id posuere facilisis, ligula libero consectetur lacus, at pellentesque nibh elit at magna. Proin sollicitudin quis nibh at viverra. Duis feugiat, lorem vitae facilisis  blandit, augue tortor cursus orci, sed porttitor eros elit at sapien. Quisque eleifend pulvinar pellentesque. </p>
<h2>This is a header (h2) with column-span: all set on it</h2>
<p> Donec blandit sapien leo, id aliquam purus vulputate a. Sed vel turpis ut eros suscipit blandit vel id eros. Nullam ut mauris luctus magna sollicitudin venenatis. Pellentesque leo mauris, malesuada nec purus ut, vestibulum malesuada lectus. Nullam ultricies tellus sapien, ut fermentum risus pretium a. Nullam magna urna, ullamcorper non congue a, efficitur nec orci. Ut aliquam molestie nisi. In at accumsan purus. Etiam non tempor ipsum. Maecenas gravida mauris in nibh vehicula ullamcorper. Sed libero lorem, faucibus eu lorem ut, gravida eleifend enim. Nunc vehicula fermentum consequat. Phasellus a pellentesque nisl. Nulla vel suscipit nibh, ac cursus dui. Suspendisse elementum dapibus risus. Nam egestas congue finibus. </p>
<p> Nunc vel risus nec nulla dignissim congue. Cras sit amet lacus nec nisl mollis pellentesque in vel purus. Suspendisse efficitur mollis nibh, congue facilisis libero auctor ac. Nulla facilisi. Etiam ut erat eget erat egestas suscipit. Curabitur vitae varius mauris. Sed accumsan diam eros, id dapibus metus rutrum at. Nunc vitae pretium massa. Aenean quis mauris leo. Nulla egestas ligula eu libero interdum feugiat. Aliquam maximus erat et tortor auctor varius. Nulla in pharetra leo, vel suscipit nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec egestas ante, vitae sollicitudin arcu. Pellentesque posuere tempus nibh, nec tempus eros pellentesque ac. </p>
<p> Curabitur tempus massa dolor, nec congue purus efficitur id. Phasellus a dictum mauris. In porta nulla lectus, pretium semper erat semper id. Fusce ornare fringilla mi, ut auctor tortor semper non. Aliquam sed felis fermentum, molestie dolor vel, eleifend diam. Donec accumsan bibendum mi, sed pretium tortor pulvinar nec. Aliquam et metus accumsan, pretium neque eu, elementum ipsum. Nam dapibus risus sed velit viverra, non consequat nibh pretium. Morbi nec gravida turpis. Quisque convallis justo ut rhoncus porttitor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <h5>This is a header (h5) with column-span: all set on it</h5> <p> Proin fringilla, sapien molestie mattis commodo, leo ligula viverra massa, eget semper leo purus sit amet est. Quisque eu diam interdum, pretium dui sed, dictum sem. Sed cursus eu est in ultrices. Suspendisse eleifend imperdiet lectus eu consectetur. Duis semper libero nec magna commodo, sollicitudin pharetra magna luctus. Fusce pellentesque sollicitudin dolor, eu scelerisque elit condimentum vel. Curabitur id condimentum nisi, eu rhoncus arcu. Proin metus purus, condimentum nec semper vitae, blandit at leo. Proin commodo et ipsum ac euismod. Aliquam erat volutpat. Nam neque nisi, ornare sit amet metus ac, faucibus tempor nulla. Quisque tristique malesuada finibus. Praesent fermentum posuere urna, a blandit risus sollicitudin nec. </p>
</div>


Related Topics



Leave a reply



Submit