1

I'm using CSS columns to span menu items across multiple columns, it is working fine for the most part, but my problem is I'm not sure if there is a way to make sure each direct child of the respective parent element with the CSS column code all remains in the same column.

So what I mean is, if the contents of the child appears it will be too long to be contained in the current column, then the whole thing will be moved into the next column, not span the contents across multiple columns.

Example here: https://codepen.io/gutterboy/pen/YzzgqVz

As you can see, Heading 2 and Heading 4 both span multiple columns - is it possible to make sure the contents of each respective sub-menu is all contained in a single column?

I considered using flexbox for this and setting flex-flow: column wrap; as well as a height; but because the area is absolute the width becomes a problem; whilst not viewable in this example, removing the width becomes an issue as the area is too small (the element it is relative to is much smaller, so setting it to 100% doesn't work); leaving it as is means the content can overflow the area quite possibly.

Example HTML:

<div class="wrapper">
  <ul class="menu">
    <li>
      <a href="#">Heading 1</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 2</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 3</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 4</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 5</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
  </ul>
</div>

Example SCSS:

.wrapper {
  position: relative;
  padding: 10px 20px;
}

li {
  list-style: none;
}

.menu {
  position: absolute;
  width: 45vw;
  columns: 3 130px;
  column-gap: 70px;
  padding: 20px 25px;
  background-color: gray;
}

.menu a {
  color: #fff;  
}

.menu > li {
  padding-top: 10px;
}

.menu > li > a {
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}

.menu > li > ul {
  padding: 12px 0 0 15px;
}

.menu > li > ul > li {
  line-height: 1.4;
}
Brett
  • 19,449
  • 54
  • 157
  • 290
  • Does this answer your question? [How to prevent column break within an element?](https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) – 04FS Nov 20 '19 at 17:13
  • @04FS That's what I was looking for - thanks. Using both `break-inside: avoid;` and `page-break-inside: avoid;` solved it :) – Brett Nov 20 '19 at 17:54

1 Answers1

0

I'm not totally sure if I got your point, but I guess you want to place each menu in it's own column. You can easily achieve this by using a css grid layout like this:

.wrapper {
  padding: 10px 20px;
}

.menu {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(5, 1fr);
}

li {
  list-style: none;
}

.menu {
  position: absolute;
  columns: 3 130px;
  column-gap: 40px;
  padding: 20px 25px;
  background-color: gray;
}

.menu a {
  color: #fff;  
}

.menu > li {
  padding-top: 10px;
}

.menu > li > a {
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}

.menu > li > ul {
  padding: 12px 0 0 15px;
}

.menu > li > ul > li {
  line-height: 1.4;
}
<div class="wrapper">
  <ul class="menu">
    <li>
      <a href="#">Heading 1</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 2</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 3</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 4</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 5</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
  </ul>
</div>
epanalepsis
  • 853
  • 1
  • 9
  • 26
  • Hey there - don't necessarily want each menu in it's own column (as want each column to have the same amount of content as much as possible), but the primary problem was making sure each menu always resided in one column and didn't expand over multiple columns. – Brett Nov 20 '19 at 17:41
  • Can you provide some information about how you want the layout of the menu to be? I'm quite unsure about how you want it to be. – epanalepsis Nov 20 '19 at 19:02