CODEWITHSUNDEEP
jqueryhtmlcss
abcid d
abcid d

Reputation: 2947

2 Columns for UL LI, But one column will contain more LIs than the other

I have a UL LI list and display inside 2 columns. It looks fine with 5 items in the first columns and other 5 in the second column.

Problem: I need to show 8 items in the first column and 2 items in the second one. I try some ways, but it doesn't work as expected.

Should I get Jquery involved to get it works? Please help.

jsfiddle

div#multiColumn {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}
<div id="multiColumn">
  <ul>
    <li>List Item1</li>
    <li>List Item2</li>
    <li>List Item3</li>
    <li>List Item4</li>
    <li>List Item5</li>
    <li>List Item6</li>
    <li>List Item7</li>
    <li>List Item8</li>
    <li>List Item9</li>
    <li>List Item10</li>
  </ul>
</div>

Upvotes: 2

Views: 5054

Answers (3)

Paulie_D
Paulie_D

Reputation: 115066

CSS-Grid can do that:

div#multiColumn ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
}
<div id="multiColumn">
  <ul>
    <li>List Item1</li>
    <li>List Item2</li>
    <li>List Item3</li>
    <li>List Item4</li>
    <li>List Item5</li>
    <li>List Item6</li>
    <li>List Item7</li>
    <li>List Item8</li>
    <li>List Item9</li>
    <li>List Item10</li>
  </ul>
</div>

Upvotes: 4

Narayanan Ramanathan
Narayanan Ramanathan

Reputation: 1400

You can achieve the same using display flex, with flex wrap. Provide you should set the height of ul element.

Advantage of this approach is that you can have responsive height if required and you can wrap to any number of columns based on width of the items.

Refer the code snippet below. 

div#multiColumn ul{
 display:flex;
 flex-direction: column;
 flex-wrap: wrap;
 height:160px;
}
<div id="multiColumn">
  <ul>
    <li>List Item1</li>
    <li>List Item2</li>
    <li>List Item3</li>
    <li>List Item4</li>
    <li>List Item5</li>
    <li>List Item6</li>
    <li>List Item7</li>
    <li>List Item8</li>
    <li>List Item9</li>
    <li>List Item10</li>
  </ul>
</div>

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191976

Use break-after: always; on the 8th li element:

div#multiColumn {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

#multiColumn li:nth-child(8) {
  -webkit-column-break-after: always;
  break-after: always;
}
<div id="multiColumn">
  <ul>
    <li>List Item1</li>
    <li>List Item2</li>
    <li>List Item3</li>
    <li>List Item4</li>
    <li>List Item5</li>
    <li>List Item6</li>
    <li>List Item7</li>
    <li>List Item8</li>
    <li>List Item9</li>
    <li>List Item10</li>
  </ul>
</div>

Upvotes: 2

Related Questions