CSS3中的display:grid网格布局介绍
前端布局之网格gird布局（简单易懂）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; height: 600px; background-color: pink; display: grid; align-items: center; justify-content: space-between; grid-auto-flow: column; } .box > span { height: 100px; background: gray; text-align: center; font-size: 24px; border: 2px solid white; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; height: 600px; background-color: pink; display: grid; align-content: center; justify-content: space-between; grid-auto-flow: column; } .box > span { height: 100px; background: gray; text-align: center; font-size: 24px; border: 2px solid white; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; height: 600px; background-color: pink; display: grid; align-items: center; justify-content: space-between; grid-auto-flow: column; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } .box > span { background: gray; text-align: center; font-size: 24px; border: 2px solid white; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; height: 600px; background-color: pink; display: grid; align-content: center; justify-content: space-between; grid-auto-flow: column; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } .box > span { background: gray; text-align: center; font-size: 24px; border: 2px solid white; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; height: 600px; background-color: pink; display: grid; grid-auto-flow: column; grid-template-columns: 1fr 2fr 3fr; grid-template-rows: 1fr 2fr; } .box > span { background: gray; text-align: center; font-size: 24px; border: 2px solid white; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> /*写法1*/ .box { width: 300px; display: grid; align-items: center; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .box > span { padding: 31.5px 0; background: gray; text-align: center; font-size: 24px; border: 2px solid white; } /*写法2*/ .box { width: 300px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .box > span { background: gray; font-size: 24px; border: 2px solid white; display: grid; justify-items: center; align-items: center; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body> </html>效果图
.box { width: 300px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .box > span { background: gray; font-size: 24px; border: 2px solid white; display: grid; justify-content: center; align-content: center; }效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .box > span { background: gray; font-size: 24px; border: 2px solid white; display: grid; justify-items: center; align-items: center; } .item1 { grid-column-start: 1; grid-column-end: 4; } </style> </head> <body> <div class="box"> <span class="item1">1</span> <span class="item2">2</span> <span class="item3">3</span> <span class="item4">4</span> <span class="item5">5</span> <span class="item6">6</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-gap: 5px 20px; } .box > span { background: gray; font-size: 24px; border: 2px solid pink; display: grid; justify-items: center; align-items: center; } </style> </head> <body> <div class="box"> <span class="item1">1</span> <span class="item2">2</span> <span class="item3">3</span> <span class="item4">4</span> <span class="item5">5</span> <span class="item6">6</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f"; } .header { grid-area: h; background: greenyellow; } .menu { grid-area: m; background: blue; } .content { grid-area: c; background: coral; } .footer { grid-area: f; background: purple; } .box > div { font-size: 24px; text-align: center; } </style> </head> <body> <div class="box"> <div class="header">header</div> <div class="menu">menu</div> <div class="content">content</div> <div class="footer">footer</div> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> #page { display: grid; /* 1.设置display为grid */ width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; /* 2.区域划分 当前为 三行 两列 */ grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */ grid-template-columns: 150px 1fr; } #page > header { grid-area: head; /* 4. 指定当前元素所在的区域位置, 从grid-template-areas选取值 */ background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; } </style> </head> <body> <section id="page"> <header>Header</header> <nav>Navigation</nav> <main>Main area</main> <footer>Footer</footer> </section> </body> </html>效果图
两种水平垂直居中对齐理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; height: 600px; background-color: pink; display: grid; align-items: center; grid-auto-flow: column; } .box > span { height: 100px; background: gray; display: grid; /* 把自己当子格子看 */ justify-items: center; align-items: center; /* 把内容当格子看 */ /* justify-content: center; align-content: center; */ font-size: 24px; border: 2px solid white; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> </div> </body> </html>效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网格gird布局</title> <style> .box { width: 300px; height: 600px; background-color: pink; display: grid; align-items: center; grid-auto-flow: column; } .box > span { height: 100px; background: gray; display: grid; /* 把自己当子格子看 */ /* justify-items: center; align-items: center; */ /* 把内容当子格子看 */ justify-content: center; align-content: center; font-size: 24px; border: 2px solid white; } </style> </head> <body> <div class="box"> <span>1</span> <span>2</span> </div> </body> </html>效果图
grid-template-areas讲解
