开创新时代之 grid 布局

最新推荐文章于 2023-05-04 09:03:33 发布

lefex

最新推荐文章于 2023-05-04 09:03:33 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351424

版权

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

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

容器属性

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

.container {    display: grid;}

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

fr：是一个占比单位，占容器的比例；
repeat(n, size) : 重复多少次，大小是多大；
minmax(min, max) : 取值范围 >= min, <= max;
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

图解前端