成都网站开发定制深圳头条新闻
前言
之前HTML 页面的布局基本上都是通过 Flexbox 来实现的，能轻松的解决复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。
grid和flex区别是什么？适用什么场景？
- Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。
- Grid 是二维布局系统，通常用于整个页面的规划。
- 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。
特点：
- 固定和灵活的轨道尺寸；
- 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置；
- 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。
缺点：
兼容性比较差。
简单画一张图：
flex布局：
grid布局：
网格列
网格元素的垂直线方向称为列。
网格行
网格元素的水平线方向称为行。
网格间距
网格间距指的是两个网格单元之间的网格横向间距或网格纵向间距。
我们可以使用以下属性给元素调整间隙的大小
- grid-column-gap
- grid-row-gap
- grid-gap
我们之前使用的弹性布局 一次只能处理一个维度上的元素布局，一行或者一列。
而现在的grid布局（网格布局）可以更自由的去设置一个容器所站的位置
例如：
如果使用flex布局去实现排版方法就需要嵌套很多个div去一块一块的区分这些
而现在使用grid布局的话，可以省下很多div的布局，直接将元素所站的位置区分开
基础示例：
使用grid布局实现图中排版：
<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>grid</title><style>body {width: 90%;max-width: 900px;margin: 2em auto;font: .9em/1.2 Arial, Helvetica, sans-serif;}.container > div {border-radius: 5px;padding: 10px;background-color: rgb(232, 66, 152);}.container{display:grid;gap:20px;grid-template-columns:1fr 2fr 1fr ;}</style></head><body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div></body></html>我们只需要在父元素中添加display:grid;属性，其元素下的子元素就会跟着变
fr：他是grid布局中的专属属性，用来平均分配容器所占位置
示例：
如图所示，这种布局方式使用弹性布局来实现相对来说是比较麻烦的，但我们使用grid布局就简单很多了
代码如下：
<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>Grid</title><style>body {width: 90%;max-width: 900px;margin: 2em auto;font: 0.9em/1.2 Arial, Helvetica, sans-serif;}.container {display: grid;grid-template-columns: 1fr 3fr;/* fr单位是frid布局专用的长度单位，可以平均的区分配每个容器所站的位置 *//* 每列改怎么去分配位置，例如菜单和内容区，side（这里定义的是菜单，那么他就占用1fr的位置，content（内容）他占3fr的位置，所以在图中我们可以看到内容区要比菜单区域更宽一些） */gap: 20px;grid-template-areas:'header header'/* header就是头部 */'side content'/* side菜单，content内容 */'footer footer'/* footer底部 */;}/* 给每个容器设置一个名称 */header{grid-area:header;}footer{grid-area:footer;}aside{grid-area:side;}article{grid-area:content;}header,footer {border-radius: 5px;padding: 10px;background-color: rgb(173, 202, 232);border: 1px solid #000;}aside,article {border: 1px solid #999;}</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>这里是底部</footer></div></body>
</html>grid布局属性：
参考某教程：grid布局
总结：
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器。
可以根据业务场景需要选择相应布局。