CSS - divide ul li into 3 columns

0 votes
486 views
added Mar 25, 2020 in CSS by LC Marshal Captain (25,790 points)
.3col {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

 

1 Response

0 votes
responded Sep 13, 2022 by lcjr First Warrant Officer (11,530 points)
ul.li_loop { 
  padding-left: 0;
  margin: 25px 0 35px;
  &.col3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    @media (max-width: 767px) {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      font-size: 14px;
    }
  }
  li {
    padding: 0 28px;
    list-style: none;
    color: #462b5a;
    // font-size: 16px;
    margin-bottom: 20px;
    position: relative;
    list-style: none;
    background-image: url('/icon/ico_tick.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
  }
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...