一句grid实现响应式布局

不懂grid布局的建议去看看文档,学习之后才知道那些属性的意思跟用法:

html

<div class="container">
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
	<div><img src="img/pic01.jpg" /></div>
</div>

css:

/* 响应式 */
.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	/* grid-template-rows: repeat(2, 200px); */
	grid-auto-rows: 140px;
	gap: 20px;
}

.container>div>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

主要是这句代码:

grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));

repeat是重复列一样布局; 

auto-fit是让我们跳过固定数量的列，将3列替换为自适应数量.原来是grid-template-columns: repeat(3, 100px);

加上auto-fit之后的用法是grid-template-columns: repeat(auto-fit, 100px);然后minmax(),我们将 100px 替换为minmax(200px, 1fr),所有响应都发生在一行 css 代码中.最后因为缩小到最后小于200px的时候,横向的滚动条就会出现了,所以我就用了min去改写,意思是最大承受到单行200的时候,如果小于200就会变成最小列宽改成100%,这样子横向滚动条就没了,完美.!!

效果:

效果自己手动写一下,gif图太大了,上传不了看动图...

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/701

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！