为了账号安全,请及时绑定邮箱和手机立即绑定

Grid布局入门

标签:
Html/CSS

Grid Line

分界线:组成网格结构,它们是垂直或者水平

Grid Track

网格的列或者行

Grid Cell

网格的一个单元

Grid Area

四个网格线包围的总空间


父容器

display

.container {  display: grid | inline-grid | subgrid;
}
  • 其他两个字面意思

  • subgrid 就是指如果本身就是要给grid item , 可以使用这个属性来获取它的父节点的行/列的大小,而不是它自己的大小

gird-template-columns/grid-template-rows

空格代表网格线

.container {  width: 400px;  height: 300px;  border: 1px solid red;  
  display: grid;  gird-template-columns: 40px 50px auto 50px 40px;  grid-template-rows: 25% 100px auto;
}

webp

gird-template-columns/grid-template-rows

还可以给网格线命名,一个网格线可以不止一个名字,如下第二个网格线有两个名字

.container {  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

另外重复的地方还可以用repeat()来简化

.container {  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

上面等同于

.container {  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

"fr"允许将轨道大小设置为自由空间,如下则是将container除去50px后的空间分为1/3:

.container {  grid-template-columns: 1fr 50px1fr 1fr;
}

grid-template-areas

通过grid-area属性来命名网格区域的名称

  • <grid-area-name> - 使用 grid-area 属性设置的网格区域的名称

  • .- 点号代表一个空网格单元

  • none - 没有定义网格区域

.container {  width: 400px;  height: 300px;  border: 1px solid red;  display: grid;  grid-template-columns: 50px 50px auto 50px;  grid-template-rows: auto;  grid-template-areas: 
    "header header header header"
    "main main . aside"
    "footer footer footer footer";
}.header {  grid-area: header;  background: red;
}.main {  grid-area: main;  background: blue;
}.aside {  grid-area: aside;  background: yellow;
}.footer {  grid-area: footer;  background: grey;
}

会得到如下图


webp

grid-template-areas


grid-template

在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。

.container {  width: 400px;  height: 300px;  border: 1px solid red;  display: grid;  
 /*  grid-template-columns: 50px 50px auto 50px;
  grid-template-rows: 50px auto 50px;
  grid-template-areas: 
    "header header header header"
    "main main . aside"
    "footer footer footer footer"; */
  grid-template: 
    "header header header header" 50px 
    "main main . aside" auto    "footer footer footer footer" 50px
    / 50px 50px auto 50px;
}

下面等价于上面


grid-column-gap / grid-row-gap

设置行列的缝隙

  grid-column-gap: 10px;
  grid-row-gap: 15px;

grid-gap

上面的缩写
grid-gap: 15px 10px;


justify-items / align-items / justify-content / align-content

用法和flex布局类似,暂不介绍

grid-auto-columns / grid-auto-rows

制定自动生成的轨道的大小

grid-auto-flow

如果你存在没有显示指明放置在网格上的 grid item,则自动放置算法会自动放置这些项目

grid

是所有的简写,和grid-template相似


子元素

grid-column-start / grid-column-end / grid-row-start /grid-row-end

  • <line>: 可以是一个数字来指代相应编号的网格线,也可使用名称指代相应命名的网格线

  • span <number>: 网格项将跨越指定数量的网格轨道

  • span <name>: 网格项将跨越一些轨道,直到碰到指定命名的网格线

  • auto: 自动布局, 或者自动跨越, 或者跨越一个默认的轨道

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

grid-column / grid-row

上面的简写

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

例子:

.container {  width: 400px;  height: 300px;  border: 1px solid red;  display: grid; 
  grid: 50px auto 50px / 10% auto 10%;
}.header {  grid-column: 1/ span 3;  grid-row: 1;  background: red;
}.main {  grid-column: 2;  grid-row: 2;  background: blue;
}.aside {  grid-column: 3;  grid-row: 2;  background: yellow;
}.footer {  grid-column: 1/ 4;  grid-row: 3;  background: grey;
}

webp

子元素

grid-area

给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用

justify-self

沿着行轴对齐grid item 里的内容(与之对应的是 align-self, 即沿列轴对齐)

align-self

沿着列轴对齐grid item 里的内容(与之对应的是 justify-self, 即沿行轴对齐)



作者:徐金俊
链接:https://www.jianshu.com/p/b2a87d05afec


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消