CSS Grid（1）

落日映苍穹つ 2023-01-19 03:13 200阅读 0赞

Grid 由水平线和垂直线构成
1、两条水平线中间的区域叫做轨道
2、两条垂直线中间的区域叫做列轨道
3、行列重叠出来的空间组成单元格

在这里插入图片描述
要开启 grid 布局，只需要给外层容器设置 display：grid
容器的直接子元素就会自动成为grid布局的元素
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

fr 是 grid 布局专用单位 代表 grid 的剩余空间 这里三列各占三分之一
在这里插入图片描述
如果把第二列改成 2fr 则会占据二分之一的空间

在这里插入图片描述

给 grid 设置间距

可以通过 column-gap 属性设置列间距
也可以通过 row-gap 设置行间距
或者使用 gap 属性统一设置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

排列元素我们可以使用 grid-template-areas 属性

在这里插入图片描述

比如有一个页面 头部和底部宽度占满全屏
侧边占三分之一 内容占三分之二

在这里插入图片描述

我们可以指定这样的区域 然后各个元素分别指定对应的区域

在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS Grid 和 Flexbox

    CSS Grid 和 Flexbox 近来在 Web 开发世界中越来越受欢迎，因为它们易于使用和可定制。Grid 和 Flexbox 这两种布局选项都允许用户排列其网站的内容，

    朱雀朱雀/ 0 赞/ 177 阅读

    相关 CSS Grid（1）

    > Grid 由水平线和垂直线构成 > 1、两条水平线中间的区域叫做轨道 > 2、两条垂直线中间的区域叫做列轨道 > 3、行列重叠出来的空间组成单元格 ![在这里

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 201 阅读

    相关 css grid 布局

    [css grid][] CSS Grid 网格布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 F

    小鱼儿小鱼儿/ 0 赞/ 337 阅读

    相关 【CSS】css grid 布局

    css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。 比如我们要达到下面这样一个效果要怎么做？ ![2018051

    快来打我*快来打我*/ 0 赞/ 485 阅读

    相关 css grid网格布局

    初次认识grid布局，看了官方的文档也很明了（[官方文档][Link 1]），然后通过自己的语言和理解，重新对他进行了总结。 > 摘要：网格布局是网站设计的基础，CSS网格模

    比眉伴天荒比眉伴天荒/ 0 赞/ 481 阅读