使用display: grid布局控制每行显示多少个容器

我们经常遇到一些for循环的数据展示,当我们的屏幕尺寸不固定时,就可能出现排版问题,这个时候我们可以使用grid

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			*{margin: 0;padding: 0;}
			.content-list {
				position: absolute;
				width: 100%;
			}
			.content-list-ul {
				display: grid;
				margin-top: 5px;
				margin-left: 25px;
				margin-right: 25px;
				grid-template-columns: repeat(7, minmax(0,1fr));
				grid-template-rows: max-content;
				height: calc(100% - 40px);
				gap: 24px;
			}
			@media screen and (max-width: 1920px) {
				.project-list-ul {
					grid-template-columns: repeat(5, minmax(0,1fr));
				}
			}
			li{
				list-style: none;
				background-color: red;
				height: 200px;
				line-height: 200px;
				color: #fff;
				text-align: center;
			}
		style>
	head>
	<body>
		<div class="content-list">
			<ul class="content-list-ul">
			ul>
		div>
		
		<script>
	
			let ul = document.querySelector('ul')
			console.log(ul)
			for (var i = 0; i < 50; i++) {
				let li = document.createElement('li');
				li.innerHTML = `${i+1}`
				ul.append(li)
			}
		script>
	body>
html>

结论

经常使用的于,某些多个不确定的方块布局,通过grid-template-columns: repeat(一行显示的个数, minmax(0,1fr)); 控制一行显示的个数

效果:

使用display: grid布局控制每行显示多少个容器_第1张图片

你可能感兴趣的:(css,CSS,html,布局)