0

Example,

Category 1  Category 3
   menu         menu cat3
   menu 2   Category 4
   menu 3       menu cat4
   menu 4       menu cat4
Category 2  Category 5
   menu x       menu cat 5

Presumptive layout:

<div class="cat">
    <span>Category 1</span>
    <div class="sub">
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 2</span>
    <div class="sub">
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 3</span>
    <div class="sub">
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 4</span>
    <div class="sub">
        <div class="menu">123</div>
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 5</span>
    <div class="sub">
        <div class="menu">123</div>
    </div>
</div>

This menu has same height but different categories and categories elements. How can I do this using css + html in automatic mode?

Is it possible?

Stanislau Karaliou
  • 142
  • 11
  • What does "automatic mode" mean? Also, you may want to consider using an [unordered list (`
    • `)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) or [definition list (`
      `)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead of arbitrary elements like `div` and `span` to layout your categories.
     – Heretic Monkey Sep 01 '20 at 14:43
  • Does this answer your question? [How do I keep two side-by-side divs the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height) – Heretic Monkey Sep 01 '20 at 14:44

1 Answers1

1

You can use CSS columns to create such layouts.

.column-wrap {
  column-count: 2; // Creates 2 column layout
}

.cat {
  break-inside: avoid; // Stops a category from overflowing to the next column
}
<div class="column-wrap">
  <div class="cat">
    <span>Category 1</span>
    <div class="sub">
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
    </div>
  </div>
  <div class="cat">
      <span>Category 2</span>
      <div class="sub">
          <div class="menu">123</div>
      </div>
  </div>
  <div class="cat">
      <span>Category 3</span>
      <div class="sub">
          <div class="menu">123</div>
      </div>
  </div>
  <div class="cat">
      <span>Category 4</span>
      <div class="sub">
          <div class="menu">123</div>
          <div class="menu">123</div>
      </div>
  </div>
  <div class="cat">
      <span>Category 5</span>
      <div class="sub">
          <div class="menu">123</div>
      </div>
  </div>
</div>
Reyno
  • 6,119
  • 18
  • 27