<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>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
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;
}