Prevent Element Fragmentation in Multi-Column Layout

Prevent element fragmentation in multi-column layout

Some experimentation led me to:

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

However, it doesn't work in Chrome Stable/Beta. It works in Chrome Canary (and Dev):

Prevent splitting inner divs while using column-width property

You have to add

-webkit-column-break-inside: avoid;

for each div element

Updated Fiddle: http://jsfiddle.net/D73pD/1/

Source

CSS multi-column layout of list items doesn't align properly in Chrome

You need each item in the column to be displayed as "inline-block". That will solve your problem without needing to use jQuery.

Additionally, each element can be specified to have width: 100% in order to get the them to use the full width of the rows.

Here is a working example:

$(document).ready(function() {    for( var i = 0; i < 24; i++ ) {        $("ul.newslist").append("<li><a href='#'>Item</a></li>");    }    $("ul.newslist > li").click(function() {        $(this).remove();    })});

ul.newslist {    columns: 5;    background-color: #ccc;    padding: 16px 0;    list-style: none;}
ul.newslist > li {    display: inline-block;    width: 100%;    border-top: 1px solid #000;}
ul.newslist > li > a {    display: block;    padding: 4px;    background-color: #f6b;    text-decoration: none;    color: inherit;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="newslist"></ul>

Different order items and layout with css3 by resolution with the same html

You can switch from a grid layout to a column CSS layout (untill masonry CSS grid layout is widely avalaible https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout , here is an example https://codepen.io/gc-nomade/pen/ExXNXdd For FF at this time if activated)

Demo from your HTML code in the snippet lower below withouth blank space

How does it work ?

• 1 - < 1024px grid for the single column to use order (grid creates a single column if no template is set)

• 2 - > 1023px column-count and display:block for a 2 column layout . break-after:always & break-before: column will be avalaible for browsers using the chrome engine (see CSS Fragmentation ).

• 3 - For firefox & >1023px a hudge margin-bottom on the third element, so there can be only 3 on the first column. This margin won't be applied inside the container, npr will be overflowing it, it will only push the fourth on the next column.
  Firefox can be filtered via (untill it understands break-after:always with Column CSS) to apply the margin trick only for Firefox browsers use :

@-moz-document url-prefix() {
  .grid > div:nth-child(3) {
   margin-bottom:100%;
   }
}

Live Example where the main container takes only the height needed to wrap the 2 columns, no matter the height of the children, you will notice that on the second example, where col 2 is taller, Chrome(s) seem follows the breaking rules, the first column do not need to be the tallest one.

.grid {
  display: grid;
  gap: 1em;
  border:solid;
  background:gray;
    
}

.grid > div:nth-child(1) {
  order: 1;
}
.grid > div:nth-child(2) {
  order: 2;
}
.grid > div:nth-child(3) {
  order: 4;
}
.grid > div:nth-child(4) {
  order: 0;
}
.grid > div:nth-child(5) {
  order: 3;

}

@media (min-width: 1024px) {
  .grid {
    display: block;
    column-count: 2;
  }
  .grid > div {
    margin-bottom: 1em;
  }
  .grid > div:nth-child(3) {
    break-after:always;
  }
  .grid> div:nth-child(4) {
      break-before: column;
      }
  @-moz-document url-prefix() {
    .grid > div:nth-child(3) {
    margin-bottom:100%;/* trick for FF that won't show that margin if the last inside a column but not in the last column */
  }
}
}

/* demo */
.grid {
  counter-reset: divs;
}
.grid > div {
  display: grid;
}
.grid > div::before {
  counter-increment: divs;
  content: counter(divs);
  color: white;
  margin: auto;
  font-size: clamp(10px, 5vmin, 30px);
}
.grid > div:nth-child(1) {
  background: #fa9917;
  height: 100px;
}
.grid > div:nth-child(2) {
  background: #33e0fe;
  height: 160px;
}
.grid > div:nth-child(3) {
  background: #ff3366;
  height: 80px;
}
.grid > div:nth-child(4) {
  background: #2bc940;
  height: 80px;
}
.grid > div:nth-child(5) {
  background: #3399fe;
  height: 160px;
}

<div class=grid>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Hello the world
<hr>
Make second column taller to see where the fourth stands before you test or ask ;)
<div class=grid>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div style="height:600px"></div>
</div>

How can a URL fragment affect a CSS layout?

Remove the overflow:hidden on #main in css_75afd7072eaf4096aaebf60674218e31.css

---

Related Topics