开创新时代之 grid 布局

前面我们学习了 Flexbox 布局,这种布局通过行或者列对其子元素进行布局,属于一维布局。今天我们学习一种二维布局方式 grid 布局,也称网格布局,它属于 Flexbox 布局的增强版,往往通过 grid 来布局整个页面框架,框架内部使用 Flexbox 布局。

如果在前面你有学过 Flexbox 布局,对理解 grid 这种布局有非常大的帮助。在开始之前我们先了解一些概念。一图胜千言:

容器属性

某个元素成为 gird 容器,需要通过 display: grid 来设置布局方式为 grid。

.container {    display: grid;}

grid-template-rows,grid-template-columns: 设置行、列的尺寸:

  1. fr:是一个占比单位,占容器的比例;

  2. repeat(n, size) : 重复多少次,大小是多大;

  3. minmax(min, max) : 取值范围 >= min, <= max;

  4. auto:根据浏览器决定大小;

.container {     display: grid;     grid-template-columns: 1fr 1fr 1f     grid-template-columns: repeat(3, 1fr);     grid-template-columns: 200px 200px 200px;     grid-template-columns: repeat(3, 200px);
     grid-template-rows: minmax(200px, 1fr) 100px auto;}

举例:

<head>    <meta charset="utf-8">    <title>CSS Grid starting point</title>    <style>        body {            width: 90%;            max-width: 900px;            margin: 2em auto;            font: .9em/1.2 Arial, Helvetica, sans-serif;        }        .container {            display: grid;            grid-template-columns: repeat(3, 200px);            grid-template-rows: minmax(200px, 1fr) 100px auto;        }
.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); }</style></head><body> <div class="container"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div></body>

上面的代码显示结果为:

gap、column-gap、row-gap 设置间隔,设置列间的间隔为 10px,行间的间隔为 20px。grid-gap 为 row-gap 和 column-gap 的缩写:

.container {    column-gap: 10px;    row-gap: 20px;}

grid-template-areas :  设置区域,指定不同的区域显示不同的内容,可以理解为「Excel 中的合并单元格」,比如我想做下面的效果(网页的一个框架):

做上面这张效果,在不使用 grid-template-areas 属性的时候,其实需要一个 3x2 的网格,然后分别把 header、footer 的两个单元格合并,就这么简单。

<!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>Document</title> <style> body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; }
.container { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 20px; }
header, footer { border-radius: 5px; padding: 10px; background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); }
aside { padding: 20px; border-left: 1px solid #999; }
.container { display: grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-columns: 3fr 1fr; grid-template-rows: 100px 300px 100px; grid-gap: 20px; }
header { grid-area: header; }
article { grid-area: content; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }</style></head>
<body> <div class="container"> <header>素燕的技术圈</header> <article> <h1>文章内容</h1> <p>文章列表1</p> <p>文章列表2</p> </article> <aside> <h2>关于</h2> <p>各个平台介绍</p> </aside> <footer>@Lefe_x</footer> </div></body>
</html>

grid-auto-flow: 容器子元素的布局顺序,默认是按照行来布局,也可以把布局方式切换成列。

justify-items: 设置单元格内容的水平位置;

align-items: 设置单元格内容的垂直位置;

place-items: <align-items>  <justify-items> 合并;

justify-content: 整个内容区域在容器里的水平位置;

align-content: 整个内容区域在容器里的垂直位置;

  place-content: <align-content>  <justify-content> 合并;

.container {  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  }

项目属性

如同 flexbox 布局一样,每个 item 也可以设置属性,我们在后续的文章中介绍。想进一步深入学习 grid 布局,查看参考文章。

参考:

https://www.html.cn/archives/8510
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids

推荐阅读:

Web 和移动端需要掌握的布局方式 - Flexbox

图解前端

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值