CSS columns

1 개요

CSS columns

• 내부 리스트의 컬럼 최소너비, 최대개수를 지정하는 CSS 속성

<style>
ul { margin:0; }
.box1 {
  background: orange;
}
.box2 {
  background: skyblue;
  width: 300px;
}
.list-3columns {
    -webkit-columns: 120px 3;
    -moz-columns: 120px 3;
    columns: 120px 3;
}
</style>

<div class="box1">
  <div class="list-3columns">
    <ul>
      <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
      <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
    </ul>
  </div>
</div>

<div class="box2">
  <div class="list-3columns">
    <ul>
      <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
      <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
    </ul>
  </div>
</div>

2 같이 보기

• HTML ul, li 태그
• HTML ol, li 태그
• 컬럼