标签:效果 css 响应式布局 splay cti 问题 允许 display 直接
首先先上代码
CSS
.container { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } .container>div{ border:1px solid; display: flex; align-items: center; justify-content: center; }
HTML
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
/* grid-template-columns:代表每一列的宽度,Grid 栅格布局带来了一个全新的值: fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。 */
/* repeat()函数,这是一个强大的指定列和行的方法,第一个参数指定行与列的数量,第二个参数指定它们的宽度。 */
minmax()
。我们将 100px 替换为 minmax(100px, 1fr)。*/
可以直接copy看看效果更直观
标签:效果 css 响应式布局 splay cti 问题 允许 display 直接
原文地址:https://www.cnblogs.com/ryanchong/p/13390418.html