devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web前端开发之CSS学习笔记10—栅格布局（网格布局）

作者：你好赵伟 | 2024-03-23 13:35:01

赞

踩

栅格布局

目录

【网格布局grid】

1.网格布局的构成 

2.父容器grid container

3.生成网格容器 display:grid/inline-grid

4.构建网格 grid-template-columns/grid-template-rows

（1）grid-template-columns

（2）grid-template-rows

5.定位空间 grid-template-areas和grid-area

4.设置间隙 grid-gap

5.网格对齐方式

（1）justify-content ：区域内容的水平对齐

（2） align-content：区域内容的垂直对齐

（3）place-content：简写

6.单元格对齐方式

（1）justify-items：单元格水平对齐

（2）align-items：单元格垂直对齐

（3）justify-self 单个单元格水平对齐

（4）align-self单个单元格垂直对齐

（5）简写：place-items和place-items 

7.网格线（栅格线）

（1）grid-column-start：从哪列开始

（2）grid-column-end：横跨列数

（3）grid-row-start ：从哪行开始

（4）grid-row-end横跨行数

（5）grid-column：grid-column-start、grid-column-end的缩写

（6）grid-row： grid-row-start和grid-row-end的缩写

（7）grid-area：grid-row、grid-column的缩写

8.元素放置规则grid-auto-flow

9.轨道大小

（1）grid-auto-rows：设置行的轨道大小

（2）grid-auto-columns：设置列的轨道大小

弹性盒布局：一维布局

栅格布局（网格布局）：二维布局

【网格布局grid】

grid 布局又称为“网格布局”，也称“栅格布局”，可以实现二维布局方式。

1.网格布局的构成 

  • 网格容器grid container：它是全部网格项的直接父级。
  • 网格项目grid item ：网格容器的子节点，即为直接后代。
  • 网格线grid line：构成网格结构的分界线。
  • 网络轨道grid track：能够理解为行和列所布局的方向，默认从左到右，从上到下。
  • 网格单元grid cell：相邻行和相邻列网格线之间到空间。
  • 网格区域grid area：多个网格线包围的总空间。网格区域能够包含任意数量的网格单元。

2.父容器grid container

网格容器是全部网格项的直接父级，决定将网格分为几行几列。

  1. <div class="grid-container">
  2. 	<div>One</div>
  3. 	<div>Two</div>
  4. 	<div>Three</div>
  5. 	<div>Four</div>
  6. 	<div>Five</div>
  7. 	<div>Six</div>
  8. </div>

网格布局的父容器(grid container)的属性：

 display: grid;
    grid-template-columns
    grid-template-rows
    grid-gap 
    grid-template-areas
    grid-auto-flow: dense | row(default) | column
    justify-items: start|end|center|stretch(default) 
    align-items: 
    start|end|center|stretch(default)
    grid-auto-columns:

3.生成网格容器 display:grid/inline-grid

将元素的display属性设置成grid或者line-grid、subgrid生成一个容器。

  • display: grid—表示为网格布局，生成块级网格
  • display: inline-grid—生成内联级网格

例子1：display:grid和display:inline-grid的区别

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>grid和inline-grid</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				grid-template-columns: auto auto auto;
  12. 				background-color: lightblue;
  13. 			}
  14. 			
  15. 			.inline-grid-container{
  16. 				display:inline-grid;
  17. 				padding: 10px;
  18. 				grid-template-columns: auto auto auto;
  19. 				background-color: lightblue;
  20. 			}
  21. 			.grid-container > div,.inline-grid-container > div{
  22. 				text-align: center;
  23. 				border: 1px solid pink;
  24. 				background-color: lemonchiffon;
  25. 			}
  26. 		</style>
  27. 	</head>
  28. 	<body>
  29. 		<div class="grid-container">
  30. 			<div>One</div>
  31. 			<div>Two</div>
  32. 			<div>Three</div>
  33. 			<div>Four</div>
  34. 			<div>Five</div>
  35. 			<div>Six</div>
  36. 		</div>
  37. 		<br>
  38. 		<div class="inline-grid-container">
  39. 			<div>One</div>
  40. 			<div>Two</div>
  41. 			<div>Three</div>
  42. 			<div>Four</div>
  43. 			<div>Five</div>
  44. 			<div>Six</div>
  45. 		</div>
  46. 	</body>
  47. </html>

4.构建网格 grid-template-columns/grid-template-rows

grid-template-columns 属性规定网格布局中的列数和宽度

grid-template-rows 规定网格布局中的行数和高度

（1）grid-template-columns

示例1：

grid-template-columns: 200px 50% 100px;

表示三列，第一列宽度200px，第二列占50%，第三列宽度100px

例子1-1：设置列数和列宽

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行和列</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				width: 600px;
  12. 				grid-template-columns: 200px 50% 100px; /*三列，第一列宽度200px，第二列占50^%，第三列宽度100px*/
  13. 				background-color: lightgray;
  14. 			}
  15. 			
  16. 			.grid-container > div{
  17. 				text-align: center;
  18. 				padding: 10pxs;
  19. 				border: 1px solid pink;
  20. 				background-color: beige;
  21. 			}
  22. 		</style>
  23. 	</head>
  24. 	<body>
  25. 		<div class="grid-container">
  26. 			<div>One</div>
  27. 			<div>Two</div>
  28. 			<div>Three</div>
  29. 			<div>Four</div>
  30. 			<div>Five</div>
  31. 			<div>Six</div>
  32. 		</div>
  33. 	</body>
  34. </html>

示例2：

grid-template-columns: 200px 50% 1fr; 

表示三列，第一列宽度200px，第二列占50%，第三列占剩余宽度。

示例3：

grid-template-columns: 1fr 1fr 1fr; 

表示平分三列。

示例4：

grid-template-columns: 1fr 2fr 3fr; 

表示三列，宽度比例为1：2：3

示例5：

grid-template-columns: 100px auto 100px; 

设置auto，中间部分的宽度会根据浏览器尺寸而改变

注：想要auto起作用，不要设置宽度width。

例子：auto

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行和列</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				grid-template-columns: 100px auto 100px; 
  12. 				background-color: lightgray;
  13. 			}
  14. 			
  15. 			.grid-container > div{
  16. 				text-align: center;
  17. 				padding: 10pxs;
  18. 				border: 1px solid pink;
  19. 				background-color: beige;
  20. 			}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<div class="grid-container">
  25. 			<div>One</div>
  26. 			<div>Two</div>
  27. 			<div>Three</div>
  28. 			<div>Four</div>
  29. 			<div>Five</div>
  30. 			<div>Six</div>
  31. 		</div>
  32. 	</body>
  33. </html>

示例6：min-content和max-content

grid-template-columns:min-content max-content max-content; 

max-content：根据列中最大的项目设置每列的尺寸

min-content：根据列中最小的项目设置每列的尺寸

例子：max-conten和min-content

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行和列</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				grid-template-columns:min-content max-content max-content; 
  12. 				background-color:lightgray;
  13. 			}
  14. 			
  15. 			.grid-container > div{
  16. 				text-align: center;
  17. 				padding: 10pxs;
  18. 				border: 1px solid pink;
  19. 				background-color:beige;
  20. 			}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<div class="grid-container">
  25. 			<div>好好学习</div>
  26. 			<div>好好学习</div>
  27. 			<div>好好学习</div>
  28. 			<div>好好学习</div>
  29. 			<div>好好学习</div>
  30. 			<div>好好学习</div>
  31. 		</div>
  32. 	</body>
  33. </html>

示例7：repeat

grid-template-columns:repeat(6,100px) ;

repeat(6,100px)表示平分六列，每列宽100px。

repeat(x,y)：x是平分列数，y是宽度。

例子：repeat

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行和列</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				grid-template-columns:repeat(6,100px) ;
  12. 				background-color:lightgray;
  13. 			}
  14. 			
  15. 			.grid-container > div{
  16. 				text-align: center;
  17. 				padding: 10pxs;
  18. 				border: 1px solid pink;
  19. 				background-color:beige;
  20. 			}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<div class="grid-container">
  25. 			<div>好好学习</div>
  26. 			<div>好好学习</div>
  27. 			<div>好好学习</div>
  28. 			<div>好好学习</div>
  29. 			<div>好好学习</div>
  30. 			<div>好好学习</div>
  31. 		</div>
  32. 	</body>
  33. </html>

示范8：repeat

grid-template-columns:repeat(3,100px) repeat(3,200px) ; 

表示前三列的每列宽度为100px，后三列的每列宽度为200px。

示例9：auto

grid-template-columns:repeat(6,auto);

表示平分六列，宽度随浏览器宽度变化而改变 

示例10：auto-fill

grid-template-columns:repeat(auto-fill,200px);

表示每列宽度固定为200px，元素布局随着浏览器宽度变化而自适应，过程中元素宽度始终不变。

 

示例11：minmax()

grid-template-columns: 100px minmax(100px,300px) 100px;

表示分为三列，第一列和第三列固定100px，中间一列随浏览器宽度改变而改变，但是宽度最小100px，最大300px，即在100-300之间。

minmax(min,max)：表示值在min到max之间。

示例12：minmax()

grid-template-columns: 100px minmax(100px,1fr) 100px;

中间列的宽度范围在100px 到 填充容器剩余空间。

示例13：auto-fill和auto-fit

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

repeat设置列数是auto-fit，设置每列宽度范围是100px 到 填充容器剩余空间。

grid-template-columns: repeat(auto-fill,minmax(100px,1fr));

repeat设置列数是auto-fit，设置每列宽度范围是100px 到 填充容器剩余空间。

auto-fill和auto-fit的区别：

auto-fill可以看到剩余空间会保留，auto-fit剩余空间会平均分配到子元素宽度中。

示例14：min-content

grid-template-columns: repeat(3,min-content);

min-content对于纯中文来说，就是一个中文的宽度；对于有分隔符的英文来说，就是这段英文中分隔单词最长的那个词的宽度；对于没有分隔符的英文来说，就是整个英文的长度。

例子：min-content

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行和列</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				grid-template-columns: repeat(3,min-content);
  12. 				background-color:lightgray;
  13. 			}
  14. 			
  15. 			.grid-container > div{
  16. 				text-align: center;
  17. 				padding: 10pxs;
  18. 				border: 1px solid pink;
  19. 				background-color:beige;
  20. 			}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<div class="grid-container">
  25. 			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae deserunt impedit omnis officiis eligendi numquam, inventore voluptates optio. Pariatur possimus unde odit magni itaque placeat dolores ipsam inventore ex deleniti.</div>
  26. 			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eveniet. Molestias, error non incidunt officiis praesentium, deserunt accusantium aspernatur qui quam blanditiis illum quos tempore ratione ab adipisci explicabo fuga.</div>
  27. 			<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam porro magnam facere ratione facilis praesentium repellendus consequatur nostrum asperiores deleniti laboriosam excepturi omnis ducimus hic laborum, odit quidem explicabo quo.</div>
  28. 			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, atque rerum. Ducimus at ullam nisi ex voluptatem reiciendis quisquam sunt. Nesciunt omnis sint iure reiciendis modi corporis molestiae, officia repellendus.</div>
  29. 			<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium fuga animi nostrum perferendis iusto. Cupiditate enim non eius optio harum quasi accusamus minus, aliquid quaerat distinctio, nesciunt commodi earum nam.</div>
  30. 			<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque veritatis quas ipsum odio vel doloribus nostrum dolorum, exercitationem, doloremque aperiam rerum distinctio consectetur numquam repellat assumenda pariatur sit! Hic, consequuntur?</div>
  31. 		</div>
  32. 	</body>
  33. </html>

示例15：max-content

grid-template-columns: repeat(3,max-content);

max-content：采用最大内容的宽度，内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求。

示例16：fit-content

grid-template-columns: repeat(3,fit-content); 

在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求。

（2）grid-template-rows

示例1：

grid-template-rows: 50px 100px;

两行，第一行的高是50px，第二行的高是100px。

例子：设置行数和行高

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行和列</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				width: 600px;
  12. 				grid-template-columns: 1fr 2fr 3fr; 
  13. 				grid-template-rows: 50px 100px;  /*两行，第一行50px高，第二行100px高*/
  14. 				background-color: lightgray;
  15. 			}
  16. 			
  17. 			.grid-container > div{
  18. 				text-align: center;
  19. 				padding: 10pxs;
  20. 				border: 1px solid pink;
  21. 				background-color: beige;
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div>One</div>
  28. 			<div>Two</div>
  29. 			<div>Three</div>
  30. 			<div>Four</div>
  31. 			<div>Five</div>
  32. 			<div>Six</div>
  33. 		</div>
  34. 	</body>
  35. </html>

示例2：

grid-template-rows: 1fr 2fr;

表示两列，按照内容的高度进行1：2比例分配的。

注：栅格容器没有设置高的情况下，按照内容高度进行比例分配。如果有高度设置，按照栅格容器高的值进行比例分配。

示例3： 

height: 300px; 

grid-template-rows: 1fr 2fr;

表示两行，按照容器的设值300px，对行高进行1:2分配

例子：行高分配

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>行和列</title>
  6. 		<style type="text/css">
  7. 		
  8. 			.grid-container{
  9. 				display: grid;
  10. 				padding: 10px;
  11. 				width: 600px;
  12. 				height: 300px;
  13. 				grid-template-columns: 1fr 2fr 3fr; 
  14. 				grid-template-rows: 1fr 2fr;  
  15. 				background-color: lightgray;
  16. 			}
  17. 			
  18. 			.grid-container > div{
  19. 				text-align: center;
  20. 				padding: 10pxs;
  21. 				border: 1px solid pink;
  22. 				background-color: beige;
  23. 			}
  24. 		</style>
  25. 	</head>
  26. 	<body>
  27. 		<div class="grid-container">
  28. 			<div>One</div>
  29. 			<div>Two</div>
  30. 			<div>Three</div>
  31. 			<div>Four</div>
  32. 			<div>Five</div>
  33. 			<div>Six</div>
  34. 		</div>
  35. 	</body>
  36. </html>

5.定位空间 grid-template-areas和grid-area

通过引用 grid-area属性中名字和grid-template-areas名字匹配，从而为这些网格分配内容和位置。

两者区别： 

grid-area属性规定网格元素在网格布局中的大小和位置。它是以下属性的简写 ：

  • grid-row-start
  • grid-column-srtart
  • grid-row-end
  • grid-column-end

grid-template-areas属性在网格布局中规定区域。可调整grid-template-areas内容来改变布局。

两者关系：

先通过grid-area属性对不同的网格元素进行命名，然后通过grid-template-areas 属性来引用这些命名的元素，从整体上进行一个布局。

示例：

grid-template-areas: 
        'header header header header header header'
        'nav main main main aside aside '
        'nav footer footer footer footer footer';

——相当于一个三行六列的表格，合并相同单元格后布局如下：

例子1：grid-area和grid-template-areas

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>栅格布局</title>
  6. 		<style type="text/css">
  7. 			.item1{ grid-area: header;}
  8. 			.item2{ grid-area: nav;}
  9. 			.item3{ grid-area: main;}
  10. 			.item4{ grid-area: aside;}
  11. 			.item5{ grid-area: footer;}
  12. 			
  13. 			.grid-container{
  14. 				display: grid;
  15. 				grid-template-areas: 
  16. 					'header header header header header header'
  17. 					'nav main main main aside aside '
  18. 					'nav footer footer footer footer footer';
  19. 				grid-gap: 10px;
  20. 				background-color: lightblue;
  21. 				padding: 10px;
  22. 			}
  23. 			
  24. 			.grid-container > * {
  25. 				background-color: lemonchiffon;
  26. 				text-align: center;
  27. 				padding: 20px 0;
  28. 				font-size: 30px;
  29. 			}
  30. 		</style>
  31. 	</head>
  32. 	<body>
  33. 		<div class="grid-container">
  34. 			<header class="item1">Header</header>
  35. 			<nav class="item2">Nav</nav>
  36. 			<main class="item3">
  37. 				<section>Section1</section>
  38. 				<section>Section2</section>
  39. 				<section>Section3</section>
  40. 				<section>Section4</section>
  41. 				<section>Section5</section>
  42. 			</main>
  43. 			<aside class="item4">Aside</aside>
  44. 			<footer class="item5">Footer</footer>
  45. 		</div>
  46. 	</body>
  47. </html>

例子2：对该布局进行行宽列高设置

grid-template-columns: 200px 1fr 1fr 1fr 100px;
grid-template-rows: 80px 250px 160px;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>栅格布局</title>
  6. 		<style type="text/css">
  7. 			.item1{ grid-area: header;}
  8. 			.item2{ grid-area: nav;}
  9. 			.item3{ grid-area: main;}
  10. 			.item4{ grid-area: aside;}
  11. 			.item5{ grid-area: footer;}
  12. 			
  13. 			.grid-container{
  14. 				display: grid;
  15. 				grid-template-areas: 
  16. 					'header header header header header header'
  17. 					'nav main main main aside aside '
  18. 					'nav footer footer footer footer footer';
  19. 				grid-template-columns: 200px 1fr 1fr 1fr 100px;
  20. 				grid-template-rows: 80px 250px 160px;
  21. 				grid-gap: 10px;
  22. 				background-color: lightblue;
  23. 				padding: 10px;
  24. 			}
  25. 			
  26. 			.grid-container > * {
  27. 				background-color: lemonchiffon;
  28. 				text-align: center;
  29. 				padding: 20px 0;
  30. 				font-size: 30px;
  31. 			}
  32. 		</style>
  33. 	</head>
  34. 	<body>
  35. 		<div class="grid-container">
  36. 			<header class="item1">Header</header>
  37. 			<nav class="item2">Nav</nav>
  38. 			<main class="item3">
  39. 				<section>Section1</section>
  40. 				<section>Section2</section>
  41. 				<section>Section3</section>
  42. 				<section>Section4</section>
  43. 				<section>Section5</section>
  44. 			</main>
  45. 			<aside class="item4">Aside</aside>
  46. 			<footer class="item5">Footer</footer>
  47. 		</div>
  48. 	</body>
  49. </html>

简写：

  1. grid-template-areas: 
  2. 	'header header header header header header'
  3. 	'nav main main main aside aside '
  4. 	'nav footer footer footer footer footer';
  5. grid-template-columns: 200px 1fr 1fr 1fr 100px;
  6. grid-template-rows: 80px 250px 160px;

 以上可简写成如下格式：

  1. grid-template-areas: 
  2. 	'header header header header header header' 80px
  3. 	'nav main main main aside aside ' 250px
  4. 	'nav footer footer footer footer footer' 160px / 200px 1fr 1fr 1fr 100px;

4.设置间隙 grid-gap

grid-gap 属性定义网格布局中行与列之间间隙的尺寸，是 grid-row-gap、grid-column-gap 属性的缩写。 

  • grid-row-gap：设置网格布局中行间隙的尺寸，默认值,0。
  • grid-column-gap：设置列间隙的尺寸，默认值为0。

示例：

  1. .grid-container{   
  2.     grid-row-gap:10px;
  3.     grid-column-gap:20px;
  4. }

以上可简写成如下形式（先行后列）： 

  1. .grid-container{ 
  2.     grid-gap: 10px 20px;/*先行后列*/
  3. }

5.网格对齐方式

（1）justify-content ：区域内容的水平对齐

justify-content属性是整个内容区域在容器里面的水平位置（左中右）。

值描述
flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center项目位于容器的中心。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。

例子1：justify-content: center;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>对齐方式</title>
  6. 		<style type="text/css">
  7. 			.grid-container{
  8. 				display: grid;
  9. 				padding: 10px;
  10. 				grid-gap: 10px;
  11. 				grid-template-columns: 100px 100px 100px;
  12. 				background-color:lightgray;
  13. 				justify-content: center;
  14. 			}
  15. 			.grid-container > div{
  16. 				text-align: center;
  17. 				padding: 10pxs;
  18. 				border: 1px solid pink;
  19. 				background-color:beige;
  20. 			}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<div class="grid-container">
  25. 			<div>1</div>
  26. 			<div>2</div>
  27. 			<div>3</div>
  28. 			<div>4</div>
  29. 			<div>5</div>
  30. 			<div>6</div>
  31. 		</div>
  32. 	</body>
  33. </html>

例子2：justify-content: end;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>对齐方式</title>
  6. 		<style type="text/css">
  7. 			.grid-container{
  8. 				display: grid;
  9. 				padding: 10px;
  10. 				grid-gap: 10px;
  11. 				grid-template-columns: 100px 100px 100px;
  12. 				background-color:lightgray;
  13. 				justify-content: end;
  14. 			}
  15. 			.grid-container > div{
  16. 				text-align: center;
  17. 				padding: 10pxs;
  18. 				border: 1px solid pink;
  19. 				background-color:beige;
  20. 			}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<div class="grid-container">
  25. 			<div>1</div>
  26. 			<div>2</div>
  27. 			<div>3</div>
  28. 			<div>4</div>
  29. 			<div>5</div>
  30. 			<div>6</div>
  31. 		</div>
  32. 	</body>
  33. </html>

例子3：justify-content: space-around;

  1. .grid-container{
  2. 	display: grid;
  3. 	padding: 10px;
  4. 	grid-gap: 10px;
  5. 	grid-template-columns: 100px 100px 100px;
  6. 	background-color:lightgray;
  7. 	justify-content: space-around;
  8. }

（2） align-content：区域内容的垂直对齐

align-content是整个内容区域在容器中的垂直位置（上中下）。

容器内必须有多行的项目，该属性才能渲染出效果。

例子：align-content: center;垂直居中

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>对齐方式</title>
  6. 		<style type="text/css">
  7. 			.grid-container{
  8. 				display: grid;
  9. 				padding: 10px;
  10. 				grid-gap: 10px;
  11. 				grid-template-columns: 100px 100px 100px;
  12. 				background-color:lightgray;
  13. 				justify-content: center;
  14. 				height: 400px;
  15. 				align-content: center;
  16. 			}
  17. 			.grid-container > div{
  18. 				text-align: center;
  19. 				padding: 10pxs;
  20. 				border: 1px solid pink;
  21. 				background-color:beige;
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div>1</div>
  28. 			<div>2</div>
  29. 			<div>3</div>
  30. 			<div>4</div>
  31. 			<div>5</div>
  32. 			<div>6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

例子：align-content: start; 垂直于开头边界

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>对齐方式</title>
  6. 		<style type="text/css">
  7. 			.grid-container{
  8. 				display: grid;
  9. 				padding: 10px;
  10. 				grid-gap: 10px;
  11. 				grid-template-columns: 100px 100px 100px;
  12. 				background-color:lightgray;
  13. 				justify-content: center;
  14. 				height: 400px;
  15. 				align-content: start;
  16. 			}
  17. 			.grid-container > div{
  18. 				text-align: center;
  19. 				padding: 10pxs;
  20. 				border: 1px solid pink;
  21. 				background-color:beige;
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div>1</div>
  28. 			<div>2</div>
  29. 			<div>3</div>
  30. 			<div>4</div>
  31. 			<div>5</div>
  32. 			<div>6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

（3）place-content：简写

place-content 属性是 align-content 和 justify-content 的简写。

第一个值为 align-content 属性, 第二个值为 justify-content。如果没有设置第二个值, 那么第二个的值与第一个相等。

  1. justify-content: center;
  2. align-content: start;

可以简写成：

place-content: start center;

6.单元格对齐方式

（1）justify-items：单元格水平对齐

justify-items属性设置单元格内容的水平位置（左中右） 

例子1：没有设置单元格对齐

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>对齐</title>
  6. 		<style>
  7. 			.item1 {
  8. 			grid-area: a;
  9. 			}
  10. 			.item2 {
  11. 			grid-area: b;
  12. 			}
  13. 			.item3 {
  14. 			grid-area: c;
  15. 			}
  16. 			.item4 {
  17. 			grid-area: d;
  18. 			}
  19. 			.grid-container {
  20. 			display: grid;
  21. 			padding: 10px;
  22. 			grid-gap: 10px;
  23. 			grid-template-areas:
  24. 			'a b'
  25. 			'c d';
  26. 			background-color: lightgray;
  27. 			
  28. 			}
  29. 			.grid-container>div {
  30. 			text-align: center;
  31. 			padding: 10px;
  32. 			border: 1px solid white;
  33. 			background-color: lemonchiffon;
  34. 			}
  35. 		</style>
  36. 	</head>
  37. 	<body>
  38. 		<div class="grid-container">
  39. 			<div class="item1">1</div>
  40. 			<div class="item2">2</div>
  41. 			<div class="item3">3</div>
  42. 			<div class="item4">4</div>
  43. 		</div>
  44. 	</body>
  45. </html>

例子2：justify-items:center设置单元格水平方向居中对齐

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>单元格对齐</title>
  6. 		<style>
  7. 			.item1 {
  8. 				grid-area: a;
  9. 			}
  10. 			.item2 {
  11. 				grid-area: b;
  12. 			}
  13. 			.item3 {
  14. 				grid-area: c;
  15. 			}
  16. 			.item4 {
  17. 				grid-area: d;
  18. 			}
  19. 			.grid-container {
  20. 				display: grid;
  21. 				padding: 10px;
  22. 				grid-gap: 10px;
  23. 				grid-template-areas:
  24. 				'a b'
  25. 				'c d';
  26. 				background-color: lightgray;
  27. 				justify-items: center; /*单元格水平对齐*/
  28. 			}
  29. 			.grid-container>div {
  30. 				text-align: center;
  31. 				padding: 10px;
  32. 				border: 1px solid white;
  33. 				background-color: lemonchiffon;
  34. 			}
  35. 		</style>
  36. 	</head>
  37. 	<body>
  38. 		<div class="grid-container">
  39. 			<div class="item1">1</div>
  40. 			<div class="item2">2</div>
  41. 			<div class="item3">3</div>
  42. 			<div class="item4">4</div>
  43. 		</div>
  44. 	</body>
  45. </html>

（2）align-items：单元格垂直对齐

align-items设置单元格内容的垂直位置（上中下）

例子1：不设置单元格的对齐

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>单元格对齐</title>
  6. 		<style>
  7. 			.item1 {
  8. 				grid-area: a;
  9. 			}
  10. 			.item2 {
  11. 				grid-area: b;
  12. 			}
  13. 			.item3 {
  14. 				grid-area: c;
  15. 			}
  16. 			.item4 {
  17. 				grid-area: d;
  18. 			}
  19. 			.grid-container {
  20. 				display: grid;
  21. 				padding: 10px;
  22. 				grid-gap: 10px;
  23. 				grid-template-areas:
  24. 				'a b b'
  25. 				'c c d';
  26. 				background-color: lightgray;
  27. 				height: 400px;/*设置高度以便更好地对比结果的差异*/
  28. 				
  29. 			}
  30. 			.grid-container>div {
  31. 				text-align: center;
  32. 				padding: 10px;
  33. 				border: 1px solid red;
  34. 				background-color: beige;
  35. 			}
  36. 		</style>
  37. 	</head>
  38. 	<body>
  39. 		<div class="grid-container">
  40. 			<div class="item1">1</div>
  41. 			<div class="item2">2</div>
  42. 			<div class="item3">3</div>
  43. 			<div class="item4">4</div>
  44. 		</div>
  45. 	</body>
  46. </html>

例子2：设置单元格水平居中对齐justify-items: center;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>单元格对齐</title>
  6. 		<style>
  7. 			.item1 {
  8. 				grid-area: a;
  9. 			}
  10. 			.item2 {
  11. 				grid-area: b;
  12. 			}
  13. 			.item3 {
  14. 				grid-area: c;
  15. 			}
  16. 			.item4 {
  17. 				grid-area: d;
  18. 			}
  19. 			.grid-container {
  20. 				display: grid;
  21. 				padding: 10px;
  22. 				grid-gap: 10px;
  23. 				grid-template-areas:
  24. 				'a b b'
  25. 				'c c d';
  26. 				background-color: lightgray;
  27. 				justify-items: center; /*单元格水平居中对齐*/
  28. 				height: 400px;/*设置高度以便更好地对比结果的差异*/
  29. 				
  30. 			}
  31. 			.grid-container>div {
  32. 				text-align: center;
  33. 				padding: 10px;
  34. 				border: 1px solid red;
  35. 				background-color: beige;
  36. 			}
  37. 		</style>
  38. 	</head>
  39. 	<body>
  40. 		<div class="grid-container">
  41. 			<div class="item1">1</div>
  42. 			<div class="item2">2</div>
  43. 			<div class="item3">3</div>
  44. 			<div class="item4">4</div>
  45. 		</div>
  46. 	</body>
  47. </html>

 例子2：设置单元格垂直居中对齐align-items: center;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>单元格对齐</title>
  6. 		<style>
  7. 			.item1 {
  8. 				grid-area: a;
  9. 			}
  10. 			.item2 {
  11. 				grid-area: b;
  12. 			}
  13. 			.item3 {
  14. 				grid-area: c;
  15. 			}
  16. 			.item4 {
  17. 				grid-area: d;
  18. 			}
  19. 			.grid-container {
  20. 				display: grid;
  21. 				padding: 10px;
  22. 				grid-gap: 10px;
  23. 				grid-template-areas:
  24. 				'a b b'
  25. 				'c c d';
  26. 				background-color: lightgray;
  27. 				height: 400px;/*设置高度以便更好地对比结果的差异*/
  28. 				align-items: center; /*单元格垂直方向居中对齐*/
  29. 			}
  30. 			.grid-container>div {
  31. 				text-align: center;
  32. 				padding: 10px;
  33. 				border: 1px solid red;
  34. 				background-color: beige;
  35. 			}
  36. 		</style>
  37. 	</head>
  38. 	<body>
  39. 		<div class="grid-container">
  40. 			<div class="item1">1</div>
  41. 			<div class="item2">2</div>
  42. 			<div class="item3">3</div>
  43. 			<div class="item4">4</div>
  44. 		</div>
  45. 	</body>
  46. </html>

（3）justify-self 单个单元格水平对齐

justify-self 属性设置单个网格元素的水平位置对齐方式（左中右）。

例子：a元素水平拉伸填充 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>单元格对齐</title>
  6. 		<style>
  7. 			.item1 {
  8. 				grid-area: a;
  9. 				justify-self: stretch; /*a元素水平方向上的拉伸填充。stretch：拉伸，表现为垂直填充。*/
  10. 			}
  11. 			.item2 {
  12. 				grid-area: b;
  13. 			}
  14. 			.item3 {
  15. 				grid-area: c;
  16. 			}
  17. 			.item4 {
  18. 				grid-area: d;
  19. 			}
  20. 			.grid-container {
  21. 				display: grid;
  22. 				padding: 10px;
  23. 				grid-gap: 10px;
  24. 				grid-template-areas:
  25. 				'a b b'
  26. 				'c c d';
  27. 				background-color: lightgray;
  28. 				height: 400px;/*设置高度以便更好地对比结果的差异*/
  29. 				justify-items: center; /*单元格水平方向居中对齐*/
  30. 			}
  31. 			.grid-container>div {
  32. 				text-align: center;
  33. 				padding: 10px;
  34. 				border: 1px solid red;
  35. 				background-color: beige;
  36. 			}
  37. 		</style>
  38. 	</head>
  39. 	<body>
  40. 		<div class="grid-container">
  41. 			<div class="item1">1</div>
  42. 			<div class="item2">2</div>
  43. 			<div class="item3">3</div>
  44. 			<div class="item4">4</div>
  45. 		</div>
  46. 	</body>
  47. </html>

（4）align-self单个单元格垂直对齐

align-self 属性指定了单个网格元素的垂直方向对齐方式（上中下） 。

例子：a元素垂直方向上的拉伸填充

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>单元格对齐</title>
  6. 		<style>
  7. 			.item1 {
  8. 				grid-area: a;
  9. 				align-self: stretch; /*a元素垂直方向上的拉伸填充。stretch：拉伸，表现为垂直填充。*/
  10. 			}
  11. 			.item2 {
  12. 				grid-area: b;
  13. 			}
  14. 			.item3 {
  15. 				grid-area: c;
  16. 			}
  17. 			.item4 {
  18. 				grid-area: d;
  19. 			}
  20. 			.grid-container {
  21. 				display: grid;
  22. 				padding: 10px;
  23. 				grid-gap: 10px;
  24. 				grid-template-areas:
  25. 				'a b b'
  26. 				'c c d';
  27. 				background-color: lightgray;
  28. 				height: 400px;/*设置高度以便更好地对比结果的差异*/
  29. 				align-items: center; /*单元格垂直方向居中对齐*/
  30. 			}
  31. 			.grid-container>div {
  32. 				text-align: center;
  33. 				padding: 10px;
  34. 				border: 1px solid red;
  35. 				background-color: beige;
  36. 			}
  37. 		</style>
  38. 	</head>
  39. 	<body>
  40. 		<div class="grid-container">
  41. 			<div class="item1">1</div>
  42. 			<div class="item2">2</div>
  43. 			<div class="item3">3</div>
  44. 			<div class="item4">4</div>
  45. 		</div>
  46. 	</body>
  47. </html>

（5）简写：place-items和place-items 

place-items 是 align-items 和 justify-items 的简写属性 ，它允许在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素。

place-self 属性是 align-self 和 justify-self 属性的缩写。align-self在前，justify-self在后。

例子：place-self 

  1. .item1 {
  2. 	grid-area: a;
  3. 	align-self: stretch;
  4. 	justify-self: center;
  5. 	}

 可以简写成：

  1. .item1 {
  2. 	grid-area: a;
  3. 	place-self: stretch center;
  4. 	}

7.网格线（栅格线）

  • grid-column-start 属性定义项目将在哪条列线上开始。
  • grid-column-end 属性项目将横跨多少列，或者项目会在哪条列线（column-line）上结束。
  • grid-row-start 属性定义项目将在哪条行线上开始。
  • grid-row-end 属性规定项目将横跨多少行，或者项目将在在哪条行线上结束。
  • grid-column：grid-column-start、grid-column-end的缩写。
  • grid-row： grid-row-start、grid-row-end的缩写。
  • grid-area： grid-row-start、grid-column-srtart、grid-row-end、grid-column-end的缩写。

（1）grid-column-start：从哪列开始

值描述
auto默认值。项目将随着流放置。
span n规定项目将横跨的列数。
column-line规定从哪列开始显示项目。

例子1：grid-column-start: 2;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>网格线</title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto auto;
  10. 				grid-gap: 10px;
  11. 				background-color: lightgray;
  12. 				padding: 10px;
  13. 			}
  14. 			.grid-container>div {
  15. 				background-color: lemonchiffon;
  16. 				text-align: center;
  17. 				padding: 20px 0;
  18. 				font-size: 30px;
  19. 			}
  20. 			.item1 {
  21. 				grid-column-start: 2; /*元素1从第二条线开始*/
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div class="item1">1</div>
  28. 			<div class="item2">2</div>
  29. 			<div class="item3">3</div>
  30. 			<div class="item4">4</div>
  31. 			<div class="item5">5</div>
  32. 			<div class="item6">6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

（2）grid-column-end：横跨列数

例子：grid-column-end: span 3; 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>网格线</title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto auto;
  10. 				grid-gap: 10px;
  11. 				background-color: lightgray;
  12. 				padding: 10px;
  13. 			}
  14. 			.grid-container>div {
  15. 				background-color: lemonchiffon;
  16. 				text-align: center;
  17. 				padding: 20px 0;
  18. 				font-size: 30px;
  19. 			}
  20. 			.item1 {
  21. 				grid-column-end: span 3; 
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div class="item1">1</div>
  28. 			<div class="item2">2</div>
  29. 			<div class="item3">3</div>
  30. 			<div class="item4">4</div>
  31. 			<div class="item5">5</div>
  32. 			<div class="item6">6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

（3）grid-row-start ：从哪行开始

例子：grid-row-start: 2; 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>网格线</title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto auto;
  10. 				grid-gap: 10px;
  11. 				background-color: lightgray;
  12. 				padding: 10px;
  13. 			}
  14. 			.grid-container>div {
  15. 				background-color: lemonchiffon;
  16. 				text-align: center;
  17. 				padding: 20px 0;
  18. 				font-size: 30px;
  19. 			}
  20. 			.item1 {
  21. 				grid-row-start: 2; 
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div class="item1">1</div>
  28. 			<div class="item2">2</div>
  29. 			<div class="item3">3</div>
  30. 			<div class="item4">4</div>
  31. 			<div class="item5">5</div>
  32. 			<div class="item6">6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

（4）grid-row-end横跨行数

例子：grid-row-end: span 2; 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>网格线</title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto auto;
  10. 				grid-gap: 10px;
  11. 				background-color: lightgray;
  12. 				padding: 10px;
  13. 			}
  14. 			.grid-container>div {
  15. 				background-color: lemonchiffon;
  16. 				text-align: center;
  17. 				padding: 20px 0;
  18. 				font-size: 30px;
  19. 			}
  20. 			.item1 {
  21. 				grid-row-end: span 2; 
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div class="item1">1</div>
  28. 			<div class="item2">2</div>
  29. 			<div class="item3">3</div>
  30. 			<div class="item4">4</div>
  31. 			<div class="item5">5</div>
  32. 			<div class="item6">6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

（5）grid-column：grid-column-start、grid-column-end的缩写

语法：grid-column: grid-column-start / grid-column-end;

例子：grid-column: 2 / span 2;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>网格线</title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto auto;
  10. 				grid-gap: 10px;
  11. 				background-color: lightgray;
  12. 				padding: 10px;
  13. 			}
  14. 			.grid-container>div {
  15. 				background-color: lemonchiffon;
  16. 				text-align: center;
  17. 				padding: 20px 0;
  18. 				font-size: 30px;
  19. 			}
  20. 			.item1 {
  21. 				grid-column: 2 / span 2;
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div class="item1">1</div>
  28. 			<div class="item2">2</div>
  29. 			<div class="item3">3</div>
  30. 			<div class="item4">4</div>
  31. 			<div class="item5">5</div>
  32. 			<div class="item6">6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

（6）grid-row： grid-row-start和grid-row-end的缩写

语法：grid-row: grid-row-start / grid-row-end;

例子：grid-row: 2 / span 2;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>网格线</title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto ;
  10. 				grid-gap: 10px;
  11. 				background-color: lightgray;
  12. 				padding: 10px;
  13. 			}
  14. 			.grid-container>div {
  15. 				background-color: lemonchiffon;
  16. 				text-align: center;
  17. 				padding: 20px 0;
  18. 				font-size: 30px;
  19. 			}
  20. 			.item1 {
  21. 				grid-row: 2 / span 2;
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div class="item1">1</div>
  28. 			<div class="item2">2</div>
  29. 			<div class="item3">3</div>
  30. 			<div class="item4">4</div>
  31. 			<div class="item5">5</div>
  32. 			<div class="item6">6</div>
  33. 		</div>
  34. 	</body>
  35. </html>

（7）grid-area：grid-row、grid-column的缩写

语法：grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end 

例子：grid-area: 2 / 1 / span 2 / span 3; 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>网格线</title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto  auto ;
  10. 				grid-gap: 10px;
  11. 				background-color: lightgray;
  12. 				padding: 10px;
  13. 			}
  14. 			.grid-container>div {
  15. 				background-color: lemonchiffon;
  16. 				text-align: center;
  17. 				padding: 20px 0;
  18. 				font-size: 30px;
  19. 			}
  20. 			.item1 {
  21. 				grid-area: 2 / 1 / span 2 / span 3;  /*从第二行第一列开始，横跨两行三列*/
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<div class="grid-container">
  27. 			<div class="item1">1</div>
  28. 			<div class="item2">2</div>
  29. 			<div class="item3">3</div>
  30. 			<div class="item4">4</div>
  31. 			<div class="item5">5</div>
  32. 			<div class="item6">6</div>
  33. 			<div class="item6">7</div>
  34. 			<div class="item6">8</div>
  35. 		</div>
  36. 	</body>
  37. </html>

8.元素放置规则grid-auto-flow

grid-auto-flow控制在网格中被自动布局的元素怎样排列

值描述
row默认值。通过填充每一行来放置项目。
column通过填充每一列来放置项目。
dense放置项目以填充网格中的任何孔。
row dense通过填充每一行来放置项目。
column dense通过填充每一列来放置项目。

例子1：grid-auto-flow: column;按列排序

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto;
  10. 				grid-template-rows: auto auto auto;
  11. 				grid-gap: 10px;
  12. 				background-color: lightgray;
  13. 				padding: 10px;
  14. 				grid-auto-flow: column;
  15. 			}
  16. 			.grid-container>div {
  17. 				
  18. 				text-align: center;
  19. 				padding: 20px 0;
  20. 				font-size: 30px;
  21. 			}
  22. 			.item1{
  23. 				background-color: lightblue;
  24. 			}
  25. 			.item2{
  26. 				background-color: pink;
  27. 			}
  28. 			.item3{
  29. 				background-color: lemonchiffon;
  30. 			}
  31. 			.item4{
  32. 				background-color: thistle;
  33. 			}
  34. 			.item5{
  35. 				background-color:yellowgreen;
  36. 			}
  37. 			.item6{
  38. 				background-color: lightskyblue;
  39. 			}
  40. 			.item7{
  41. 				background-color: steelblue;
  42. 			}
  43. 			.item8{
  44. 				background-color: salmon;
  45. 			}
  46. 			.item9{
  47. 				background-color: lightseagreen;
  48. 			}
  49. 		</style>
  50. 	</head>
  51. 	<body>
  52. 		<div class="grid-container">
  53. 			<div class="item1">1</div>
  54. 			<div class="item2">2</div>
  55. 			<div class="item3">3</div>
  56. 			<div class="item4">4</div>
  57. 			<div class="item5">5</div>
  58. 			<div class="item6">6</div>
  59. 			<div class="item7">7</div>
  60. 			<div class="item8">8</div>
  61. 			<div class="item9">9</div>
  62. 		</div>
  63. 	</body>
  64. </html>

例子2：grid-auto-flow: row;按行排序

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style>
  7. 			.grid-container {
  8. 				display: grid;
  9. 				grid-template-columns: auto auto auto;
  10. 				grid-template-rows: auto auto auto;
  11. 				grid-gap: 10px;
  12. 				background-color: lightgray;
  13. 				padding: 10px;
  14. 				grid-auto-flow: row; /*按行排列*/
  15. 			}
  16. 			.grid-container>div {
  17. 				
  18. 				text-align: center;
  19. 				padding: 20px 0;
  20. 				font-size: 30px;
  21. 			}
  22. 			.item1{
  23. 				background-color: lightblue;
  24. 			}
  25. 			.item2{
  26. 				background-color: pink;
  27. 			}
  28. 			.item3{
  29. 				background-color: lemonchiffon;
  30. 			}
  31. 			.item4{
  32. 				background-color: thistle;
  33. 			}
  34. 			.item5{
  35. 				background-color:yellowgreen;
  36. 			}
  37. 			.item6{
  38. 				background-color: lightskyblue;
  39. 			}
  40. 			.item7{
  41. 				background-color: steelblue;
  42. 			}
  43. 			.item8{
  44. 				background-color: salmon;
  45. 			}
  46. 			.item9{
  47. 				background-color: lightseagreen;
  48. 			}
  49. 		</style>
  50. 	</head>
  51. 	<body>
  52. 		<div class="grid-container">
  53. 			<div class="item1">1</div>
  54. 			<div class="item2">2</div>
  55. 			<div class="item3">3</div>
  56. 			<div class="item4">4</div>
  57. 			<div class="item5">5</div>
  58. 			<div class="item6">6</div>
  59. 			<div class="item7">7</div>
  60. 			<div class="item8">8</div>
  61. 			<div class="item9">9</div>
  62. 		</div>
  63. 	</body>
  64. </html>

9.轨道大小

（1）grid-auto-rows：设置行的轨道大小

例子：grid-auto-rows: 100px;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>轨道</title>
  6. 		<style>
  7. 			.item1 { grid-area: 1 / 1 / 2 / 2; }
  8. 			.item2 { grid-area: 1 / 2 / 2 / 3; }
  9. 			.item3 { grid-area: 1 / 3 / 2 / 4; }
  10. 			.item4 { grid-area: 2 / 1 / 3 / 2; }
  11. 			.item5 { grid-area: 2 / 2 / 3 / 3; }
  12. 			.item6 { grid-area: 2 / 3 / 3 / 4; }
  13. 			
  14. 			.grid-container {
  15. 				display: grid;
  16. 				grid-auto-rows: 100px; /*行100px*/
  17. 				grid-gap: 10px;
  18. 				background-color: lightgray;
  19. 				padding: 10px;
  20. 			}
  21. 			
  22. 			.grid-container > div {
  23. 				background-color: lemonchiffon;
  24. 				text-align: center;
  25. 				padding: 20px 0;
  26. 				font-size: 30px;
  27. 			}
  28. 		</style>
  29. 	</head>
  30. 	<body>
  31. 		<p>把每行的尺寸设置为 100 像素：</p>
  32. 		<div class="grid-container">
  33. 			<div class="item1">1</div>
  34. 			<div class="item2">2</div>
  35. 			<div class="item3">3</div>  
  36. 			<div class="item4">4</div>
  37. 			<div class="item5">5</div>
  38. 			<div class="item6">6</div>
  39. 		</div>
  40. 		<p><b>注释：</b>grid-template-rows 属性会覆盖此属性。</p>
  41. 	</body>
  42. </html>

（2）grid-auto-columns：设置列的轨道大小

 例子：grid-auto-columns: 50px;

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>轨道</title>
  6. 		<style>
  7. 			.item1 { grid-area: 1 / 1 / 2 / 2; }
  8. 			.item2 { grid-area: 1 / 2 / 2 / 3; }
  9. 			.item3 { grid-area: 1 / 3 / 2 / 4; }
  10. 			.item4 { grid-area: 2 / 1 / 3 / 2; }
  11. 			.item5 { grid-area: 2 / 2 / 3 / 3; }
  12. 			.item6 { grid-area: 2 / 3 / 3 / 4; }
  13. 			
  14. 			.grid-container {
  15. 				display: grid;
  16. 				grid-auto-columns: 50px; /*列50px*/
  17. 				grid-gap: 10px;
  18. 				background-color: lightgray;
  19. 				padding: 10px;
  20. 			}
  21. 			
  22. 			.grid-container > div {
  23. 				background-color: lemonchiffon;
  24. 				text-align: center;
  25. 				padding: 20px 0;
  26. 				font-size: 30px;
  27. 			}
  28. 		</style>
  29. 	</head>
  30. 	<body>
  31. 		<p>把每列的尺寸设置为 50 像素：</p>
  32. 		<div class="grid-container">
  33. 			<div class="item1">1</div>
  34. 			<div class="item2">2</div>
  35. 			<div class="item3">3</div>  
  36. 			<div class="item4">4</div>
  37. 			<div class="item5">5</div>
  38. 			<div class="item6">6</div>
  39. 		</div>
  40. 		<p><b>注释：</b>grid-template-columns 属性会覆盖此属性。</p>
  41. 	</body>
  42. </html>

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号