网格布局 (精华版)
1. 案例
案例(1)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Css Grid</title> <style> .weapper { display: grid; /* 布局分配 */ grid-template-columns: 70% 30%; /* 外边距, 列边距 */ /* grid-column-gap: 1rem; */ /* 外边距, 行间距 */ /* grid-row-gap: 1rem; */ /* 混个属性 边距 第一个是行边距 第二个是列边距 */ grid-gap: 1rem 0.5rem; } .weapper > div { background-color: #eee; padding: 1rem; } .weapper > div:nth-child(odd) { background: #ddd; } </style> </head> <body> <div class="weapper"> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium molestias consequuntur molestiae dolorum explicabo facere rem velit debitis aliquid. Rerum, labore quas? Facere nulla tempora temporibus iste blanditiis veritatis exercitationem nesciunt ut sequi aliquam dicta iusto architecto praesentium saepe sit numquam quis, vitae quia officia nobis debitis asperiores? Exercitationem eligendi cum unde nihil quod sint recusandae doloribus distinctio et, veniam debitis, aspernatur laudantium! Voluptates voluptatibus nam quibusdam, suscipit ipsam deserunt optio ea sequi incidunt fugit quaerat doloremque earum nemo inventore!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum fugiat, ratione incidunt inventore soluta, alias dolorem nulla est tempore iusto, perspiciatis doloremque ut mollitia id sed ex porro eum illum doloribus eligendi quibusdam officiis! Maiores qui omnis odio eaque cupiditate!</div> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium molestias consequuntur molestiae dolorum explicabo facere rem velit debitis aliquid. Rerum, labore quas? Facere nulla tempora temporibus iste blanditiis veritatis exercitationem nesciunt ut sequi aliquam dicta iusto architecto praesentium saepe sit numquam quis, vitae quia officia nobis debitis asperiores? Exercitationem eligendi cum unde nihil quod sint recusandae doloribus distinctio et, veniam debitis, aspernatur laudantium! Voluptates voluptatibus nam quibusdam, suscipit ipsam deserunt optio ea sequi incidunt fugit quaerat doloremque earum nemo inventore!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum fugiat, ratione incidunt inventore soluta, alias dolorem nulla est tempore iusto, perspiciatis doloremque ut mollitia id sed ex porro eum illum doloribus eligendi quibusdam officiis! Maiores qui omnis odio eaque cupiditate!</div> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium molestias consequuntur molestiae dolorum explicabo facere rem velit debitis aliquid. Rerum, labore quas? Facere nulla tempora temporibus iste blanditiis veritatis exercitationem nesciunt ut sequi aliquam dicta iusto architecto praesentium saepe sit numquam quis, vitae quia officia nobis debitis asperiores? Exercitationem eligendi cum unde nihil quod sint recusandae doloribus distinctio et, veniam debitis, aspernatur laudantium! Voluptates voluptatibus nam quibusdam, suscipit ipsam deserunt optio ea sequi incidunt fugit quaerat doloremque earum nemo inventore!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum fugiat, ratione incidunt inventore soluta, alias dolorem nulla est tempore iusto, perspiciatis doloremque ut mollitia id sed ex porro eum illum doloribus eligendi quibusdam officiis! Maiores qui omnis odio eaque cupiditate!</div> </div> </body> </html>
重要属性
display: grid; 是设置网格布局
grid-template-columns: 70% 30%; 是布局分配
grid-gap: 1rem 0.5rem; 设置边距 第一个是行边距 第二个是列边距
案例(2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid</title> <style> .wrapper { display: grid; /* 布局占比 3个 */ /* grid-template-columns: 1fr 2fr 1fr; */ /* 布局占比一行4个平均分配 */ grid-template-columns: repeat(3, 1fr); /* 边距 */ grid-gap: 1rem; /* 高度 */ grid-auto-rows: 100px; /* 高度为100px 如果文本溢出动态扩大高度 */ grid-auto-rows: minmax(100px, auto); } .nestad { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; grid-auto-rows: 70px; } .wrapper > div { background-color: #eee; padding: 1rem; } .wrapper > div:nth-child(odd) { background: #ddd; } .nestad > div { border: 1px #333 solid; padding: 1rem; } </style> </head> <body> <div class="wrapper"> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita! Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aut accusamus doloribus fugit odio nulla! Perspiciatis, ea neque, rerum in error ducimus minus blanditiis ad soluta ratione et repellendus, iusto expeditamet consectetur adipisicing elit. Quae, expedita! Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aut accusamus doloribus fugit odio nulla! Perspiciatis, ea neque, rerum in error ducimus minus blanditiis ad soluta ratione et repellendus, iusto expedita oamet consectetur adipisicing elit. Quae, expedita! Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aut accusamus doloribus fugit odio nulla! Perspiciatis, ea neque, rerum in error ducimus minus blanditiis ad soluta ratione et repellendus, iusto expedita oa odio!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div class="nestad"> <div>Lorem.</div> <div>Lorem.</div> <div>Lorem.</div> </div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, expedita!</div> </div> </body> </html>
重要属性
grid-template-columns: 1fr 2fr 1fr; 布局分配的另一个属性值 布局占比
grid-template-columns: repeat(3, 1fr); 布局占比一行3个平均分配
grid-auto-rows: minmax(100px, auto); 高度为 100px 如果文本溢出动态扩大高度
案例(3)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid</title> <style> .wrapper { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-auto-rows: minmax(100px, auto); grid-gap: 1rem; /* 行轴线 */ justify-items: stretch; /* 列轴线 */ align-items: stretch; } .wrapper > div { background-color: #eee; padding: 1rem; } .wrapper > div:nth-child(odd) { background: #ddd; } .box1 { /* align-self: start; */ /* 跨行 第一根到第三根 */ grid-column: 1/3; /* 跨列 1~3 */ grid-row: 1/3; } .box2 { /* align-self: end; */ grid-column: 3; grid-row: 1/3; } .box3 { /* justify-self: end; */ /* 2/4 是从第2更开始到第4根结束 */ grid-column: 2/4; grid-row: 3; } .box4 { /* justify-self: start; */ /* column 控制行 */ grid-column: 1; /* row 控制列 */ grid-row: 3/4; border: 1px #333 solid; } </style> </head> <body> <div class="wrapper"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> <div class="box box4">Box 4</div> </div> </body> </html>
重要属性
grid-column: 1/3; 跨行 第一根到第三根
grid-row: 1/3; 跨列 跨列 1~3
案例(4)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid</title> <style> .wrapper { display: grid; /* 根据标签名布局排版布局 定义网格模板 */ grid-template-areas: 'header header header' 'content content sidebar' 'box-1 box-2 box-2' 'box-3 box-3 box-3' 'footer footer footer'; grid-gap: 1rem; } .header { grid-area: header; text-align: center; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .box-1 { grid-area: box-1; } .box-2 { grid-area: box-2; } .box-3 { grid-area: box-3; } .footer { grid-area: footer; text-align: center; } .hreader, .content, .sidebar, .box-1, .box-2, .box-3, .footer { border: 1px #ccc solid; padding: 0.5rem; } @media (max-width: 500px) { .wrapper { grid-template-areas: 'header' 'content' 'sidebar' 'box-1' 'box-2' 'box-3' 'footer'; } } </style> </head> <body> <div class="wrapper"> <header class="header"> <h1>铄洋在线</h1> </header> <section class="content"> <h3>Hello World</h3> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi voluptatem eum tempora necessitatibus non tempore, ducimus expedita aspernatur voluptatum saepe at, quod corporis id aliquam commodi est distinctio dolorem consectetur?</p> </section> <aside class="sidebar"> <h3>联系我们</h3> <ul> <li>铄洋在线</li> <li>中国</li> <li>铄洋在线@163.com</li> <li>123456</li> </ul> </aside> <div class="box-1"> <h3>标题一</h3> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius dignissimos, placeat doloribus reiciendis consequatur architecto odit eum laudantium praesentium. Laboriosam, omnis? Illo delectus eligendi est. Ex odio ut culpa neque?</p> </div> <div class="box-2"> <h3>标题二</h3> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius dignissimos, placeat doloribus reiciendis consequatur architecto odit eum laudantium praesentium. Laboriosam, omnis? Illo delectus eligendi est. Ex odio ut culpa neque?</p> </div> <div class="box-3"> <h3>标题三</h3> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius dignissimos, placeat doloribus reiciendis consequatur architecto odit eum laudantium praesentium. Laboriosam, omnis? Illo delectus eligendi est. Ex odio ut culpa neque?</p> </div> <footer class="footer"> <p>Copyright © 2021</p> </footer> </div> </body> </html>
重要属性
根据标签名布局排版布局 定义网格模板
grid-template-areas:
'header header header'
'content content sidebar'
'box-1 box-2 box-2'
'box-3 box-3 box-3'
'footer footer footer';
根据 grid-template-areas 里的属性 设置属性值
grid-area: header;
外边距 如果设置行边距和列边距一样的话就省略
grid-gap: 1rem;
媒体查询
@media (max-width: 500px) {
.wrapper {
grid-template-areas:
'header'
'content'
'sidebar'
'box-1'
'box-2'
'box-3'
'footer';
}
}
2. 网格布局的概念
是什么: 网格是一组相交的水平线和垂直线，它定义了网格的列和行。
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。
网格布局由一个父元素及一个或多个子元素组成。
