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;
}

STEVE O’CALLAGHAN

I’m Steve, a Melbourne-based front end developer. I have 10 years experience, working on website development, UI/UX design, as well as SEO, project management and marketing.

Twitter

Follow @steveyoc2 on Twitter. You’ll find me tweeting about everything from web development to a range of sports