Tag Archive for: break-insise

Recently, I was asked to help a client in turning a right fly-out menu into 3 columns of list-items.

Essentially, there are a few ways to approach this. You could use the float property, or the flexbox property. Maybe CSS Grid, depending on the requirements. In this case, because it wasn’t possible to add containers around the breaks of the list-items, and all the parent menu items were going to be a different height, we decided to use the column-count property.

The column-count property allows each list item and the relative items inside the element, to be responsive to the browser.

Once the column-count property has been set, you can use the break-inside property to ensure each parent list item is not split into two.

The result:

#menu ul 
{
   -webkit-column-count: 3; /* Chrome, Safari, Opera */
   -moz-column-count: 3; /* Firefox */
   column-count: 3;
}
#menu ul li 
{
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   break-inside: avoid;
}