【前端】CSS布局问题之网格布局_或者不搞前端直接网格

作者：你好赵伟 | 2024-03-23 13:33:58

踩

或者不搞前端直接网格

对于一个偶尔需要写写前端界面的我来说，今天了解到了HTML前端可以用网格布局之后，整个人都轻松起来了。在基于C#做手持设备开发和安卓应用程序里，都常用网格来进行布局。而在网页前端，我几乎都是用用Bootstrap这种框架来设定布局，对于基础的CSS控制样式还能搞定，但是涉及到布局，就一头雾水。

比如最近用到float:left这种布局，碰到元素之间崩塌的情况，就是元素位置根本不按照设想的来，看了一些书和文章，提到了这个问题。大家将CSS归结为艺术，不是科学。哈哈哈。

对于网格布局我还不是特别熟悉，下面先放一个测试案例：

<!DOCTYPE html>
<html>
<head>
	<title>CSS Grids</title>
	<style type="text/css">

		h1 {
    
			text-align: center;
		}
		/*核心*/
		.wrapper {
    
			display: grid;
			grid-template-columns: 30% 30% 30%;
		}
		.wrapper > div {
    
			background: #eee;
			padding: 1em;
		}
		.wrapper >div:nth-child(odd) {
    
			background: #ddd;
		}
	</style>
</head>
<body>
	<header>
		<h1>Hello World</h1>
	</header>
	<div class="wrapper">
		

		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

非常简单的，将容器设置为：

/*核心*/
.wrapper {
   
	display: grid;
	grid-template-columns: 30% 30% 30%;
}
1
2
3
4
5
6

然后里面的元素就按照百分比来排列了~~非常方便。

grid-template-columns的用法详解

注意，这里面grid-template-columns推荐使用的是fr作为单位，当然用什么单位都是随意的，比如px等。

.wrapper

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/295485?site

【前端】CSS布局问题之网格布局_或者不搞前端 直接网格

grid-template-columns的用法详解

【前端】CSS布局问题之网格布局_或者不搞前端直接网格