关于 CSS 中 Grid响应式布局

2020-07-28 12:33:42 阅读：255 来源： 互联网

标签：repeat 100px 响应宽度 grid template minmax Grid CSS

首先先上代码

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()函数，这是一个强大的指定列和行的方法，第一个参数指定行与列的数量，第二个参数指定它们的宽度。 */

/* auto-fit，让我们跳过固定数量的列，将指定数量根据指定宽度替换为自适应的数量。*/ /* 栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，永远没法实现的弹性，因为它们很难填充整个宽度。网格通常在右侧留有空白。*/
/* 为了解决上述问题，我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr)。*/

可以直接copy看看效果更直观

标签：repeat,100px,响应,宽度,grid,template,minmax,Grid,CSS
来源： https://www.cnblogs.com/ryanchong/p/13390418.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于 CSS 中 Grid响应式布局