Hamburger CSS CSS Dynamic Columns

Question

I wrote a Knockout binding for MegaMenu that has a hamburger component

A hamburger contains a bunch of categories and items in these categories.

Categories act as headings and are shown in bold. Then they display their elements under a small indent.

Categories and items are just rows retrieved from the database.

Hamburger rules are as follows: -

Do not split the category into columns

Use three columns before scrolling. ie Do not fill in only two columns and have a scroll bar (vertical)

Arrange columns as much as possible

3 columns max

Hamburger has maximum height limit

Categories are ordered alphabetically -

An example of an order is the following: -

, ( , )

, , , , , , , ,

3 ,

Col 1               Col 2                 Col 3
-----               -----                 -----
Beds                Dogs                  Hobbies
Cars                Furniture             Homes
Cats                Gyms                  Horses

html : -

<div>
 <ul>
   <li>Beds
     <ul>
       <li>Item 1</li>
       <li>Item 2
     </ul>
   </li>
   <li>Cars
     <ul>
       <li>Item 1</li>
      </ul>
   </li> 
   <li>Cats
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
     </ul>
   </li> 
   <li>Dogs
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
     </ul>
   </li> 
 </ul>
</div>

css ?

, .., html

Answer 1

break-inside: avoid

: https://css-tricks.com/almanac/properties/b/break-inside/

, break-inside.

 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
           page-break-inside: avoid; /* Firefox */
                break-inside: avoid; /* IE 10+ */

http://codepen.io/HerrSerker/pen/obgddJ

.outer {
  -moz-columns: 3;
  -webkit-columns: 3;
  columns: 3;
  display: block;
}
.outer > li {
  display: block;
  padding-top: 30px;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.outer > li > span {
  text-decoration: underline;
}
.inner {
  width: 200px;
  display: block;
  text-decoration: none;
}
.inner > li {
  display: block;
  padding-left: 10px;
  padding-top: 3px;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
  max-height: 400px;
  overflow-y: auto;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="wrapper"><ul class="outer">
  <li><span>Lorem ipsum dolor.</span>
    <ul class="inner">
      <li>Fuga, ratione blanditiis commodi.</li>
      <li>Obcaecati dicta ut, pariatur!</li>
      <li>Earum, illum sapiente enim.</li>
    </ul>
  </li>
  <li><span>Vel, ratione cum!</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Accusamus, odio ipsum nemo!</li>
      <li>Molestiae unde natus odio.</li>
      <li>Lorem ipsum dolor sit.</li>
      <li>Corporis, tempora nisi minus.</li>
    </ul>
  </li>
  <li><span>Aliquid, tenetur, similique.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Repellendus repellat placeat odit!</li>
    </ul>
  </li>
  <li><span>Quibusdam, necessitatibus aliquid.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>At nisi, quas veritatis!</li>
      <li>Perferendis laudantium nesciunt dolor!</li>
      <li>Distinctio quidem veniam impedit!</li>
    </ul>
  </li>
  <li><span>Sed, quam, beatae.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Voluptates temporibus provident dolores.</li>
      <li>Explicabo non minus ullam!</li>
      <li>Tenetur, molestias, debitis. Voluptatum.</li>
      <li>Quibusdam incidunt unde, laboriosam!</li>
      <li>Fugiat perferendis eligendi, dignissimos.</li>
    </ul>
  </li>
  <li><span>Lorem ipsum.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Perspiciatis, a dolore officia!</li>
    </ul>
  </li>
  <li><span>Voluptatum, ipsum?</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Odit, aliquam voluptates alias!</li>
    </ul>
  </li>
  <li><span>Dolorem, quos!</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Quae quos quas, fugit?</li>
    </ul>
  </li>
  <li><span>Cum, excepturi.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Libero distinctio, necessitatibus laborum!</li>
    </ul>
  </li>
  <li><span>Blanditiis, harum.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Corporis fuga accusamus, ab?</li>
    </ul>
  </li>
</ul>
</div>

Hide result

? . : http://caniuse.com/#feat=css-grid

---

: CSS. HTML JS

Answer 2

css ?

, CSS . HTML.

Answer 3

display:table div, display:table-cell . .

Answer 4

, , , css:

ul{
    ...
    column-gap: 2em;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

: http://jsfiddle.net/pg2xy9h2/3/

I do not understand how you can have a Even up the columns as much as possibledynamic number of columns. Even up- division calculation, how can you do division if the divisor is unknown?