columns布局，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<h3>纯文字的效果：</h3>
<p>
  山不在高，有仙则名，水不在深，有龙则灵。斯是陋室，惟吾德馨，苔痕上阶绿，草色入帘青，谈笑有鸿儒，往来无白丁，可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形，南阳诸葛庐，西蜀子云亭，孔子云：“何陋之有！”
</p>
<h3>盒子的效果：</h3>
<div class="container">
  <div class="list">
    <span class="box">1</span>
    <span class="box">2</span>
    <span class="box">3</span>
    <span class="box">4</span>
    <span class="box">5</span>
    <span class="box">6</span>
    <span class="box">7</span>
    <span class="box">8</span>
    <span class="box">9</span>
    <span class="box">10</span>
    <span class="box">11</span>
    <span class="box">12</span>
    <span class="box">13</span>
    <span class="box">14</span>
  </div>
</div>

</body>

CSS

格式化

body {
  padding-left: 30px;
}
p {
  padding: 10px;
  max-width: 500px;
  background: skyblue;
  column-count: 3;
  column-gap: 40px;
  column-rule: 2px solid gold;
  text-align: justify;
}
.container {
  width: 400px;
  border: 4px dotted gold;
  overflow: auto;
  scroll-snap-type: x mandatory;
}
.list {
  height: 200px;
  font-size: 0;
  column-width: 400px;
}
.box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80px;
  aspect-ratio: 1 / 1;
  background: gold;
  border-radius: 20px;
  font-size: 30px;
  margin: 10px;
}
.box:nth-child(8n+1) {
  scroll-snap-align: start;
}

格式化

预览

控制台