侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

Grid

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 198 阅读 / 524 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS / Grid
跟flex一样,一个container包含多个item
container
行列 网格
未定义item的行列
排列方向
间距
item对齐方式
content对齐方式
area
item
对齐方式
area
网格定位



container's properties
grid-template-columns/rows
几行几列,行列的大小
1.
repeat(3,100px)
2.
repeat(3,1fr) fraction 片段 均分成3份
3.
1fr minmax(120px,1fr)
4.
100px auto 100px 剩下的大小都给auto
5.
repeat(auto-fill,100px) 容器大小不固定,自动填充
6.
100px 100px 100px
grid-template
grid-template-rows / grid-template-columns
1.
grid-template: repeat(2, 1fr) / repeat(2, 1fr); 两行,每行两列
2.
grid-template: "sidebar mainAdsaf" "sidebar mainB";
item 上指定一下这个item是谁 grid-area: sidebar;

💡
grid-template-rows: repeat(auto-fill, 155px); // 这么写会出问题, 如果元素没有固定宽高的话从第二行开始高度会被自动压缩 grid-auto-rows: 150px; 用这个解决
grid-auto-rows: 150px;
grid-auto-columns/rows
grid-template-columns 属性里没有定义到的item的宽和高
grid-auto-flow
从左到右 还是从上到下. 乱序补位
1.
row
2.
row dense 放不下但是还有空间就从后面提上来一个放 乱序补位
3.
column
grid-template-area
grid-template-area:'a b c'
                   'd d d'
                   'e . e'
//按item写的顺序来,按字母分成abcde区域,.表示不分区

row-gap column-gap gap
间距

items
每一个item的对其方式
1.
justify-items
2.
align-items
3.
place-items 前两个合起来

start end center startch
定义这个之后如果item没定义宽度就会按最小的来

content
所有的item 叫content, 说的是整体的展现方式
1.
justify-content
2.
align-content
start end center stretch space-around space-between space-evenly




items's properties

占网格线起始
1.
grid-column-start
2.
grid-column-end
3.
grid-row-start
4.
grid-row-end

1.
数字 3个item4条线. 指定某条线就好.
2.
span 2 不指定某根网格线了,直说占几格

例子
grid-column: 1 / 3
终极简写
gird-area:1 / 1 / 3 / 3 先column后row
区域
grid-area:a
指定元素放在哪个区域

对齐方式
justify-self:
align-self
place-self
0

评论区