开发者社区> auqbllxiu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Grid网格布局学习笔记

简介: Grid网格布局学习笔记
+关注继续查看

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。

Grid 布局远比 Flex 布局强大。

.grid {
    /* 块级元素 */
    display: grid;
}

容器属性

1、划分行和列

指定列宽 grid-template-columns

指定行高 grid-template-rows

允许的值:
100px 100px 100px;
33.33% 33.33% 33.33%;
repeat(3, 33.33%); (重复的次数, 重复值)
repeat(auto-fill, 100px); 自动填充
1fr 2fr; 比例关系
150px 1fr 2fr;
1fr 1fr minmax(100px, 1fr); 长度范围
100px auto 100px; 由浏览器自己决定长度
[c1] 100px [c2] 100px [c3] auto [c4]; 网格线的名称

2、行列间距

行间距 grid-row-gap (row-gap)
列间距 grid-column-gap (column-gap)
grid-gap (gap): <grid-row-gap> <grid-column-gap>;

3、指定"区域"

grid-template-areas: 'a b c'
'd e f'
'g h i';

4、放置顺序

grid-auto-flow
row 先行后列 (默认)
column 先列后行

5、单元格对齐

水平位置 justify-items: 
start | end | center | stretch(default);
垂直位置 align-items:
start | end | center | stretch(default);

place-items: <align-items> <justify-items>;

6、内容对齐

水平位置justify-content: 
start | end | center | stretch | space-around | space-between | space-evenly;
垂直位置align-content:
start | end | center | stretch | space-around | space-between | space-evenly;

place-content: <align-content> <justify-content>

7、多余网格的列宽和行高

grid-auto-columns
grid-auto-rows
写法与grid-template-columns和grid-template-rows完全相同

易读易写的角度考虑,还是建议不要合并属性

项目属性

1、网格线定位

grid-column-start:左边框所在的垂直网格线
grid-column-end:右边框所在的垂直网格线
grid-row-start:上边框所在的水平网格线
grid-row-end属性:下边框所在的水平网格线

允许值:
指定为网格线的序号 1
指定为网格线的名字 header-start
跨越网格 span 2;

grid-column: <grid-column-start> / <grid-column-end>
grid-row: <grid-row-start> / <grid-row-end>

2、指定项目区域

grid-area

允许值
区域名: e
指定项目的位置:<row-start> / <column-start> / <row-end> / <column-end>;

3、单元格内容对齐

水平位置 justify-self(左中右),与justify-items一致
垂直位置 align-self(上中下),与align-items一致

place-self: <align-self> <justify-self>;

布局实例

<style>
.grid {
/ 块级元素 /
display: grid;

/ 指定列宽 /
grid-template-columns: 1fr 1fr 1fr;
/ 指定行高 /
grid-template-rows: repeat(3, 100px);

/ 指定行列间距 /
row-gap: 10px;
column-gap: 10px;

/ 放置顺序 /
grid-auto-flow: row;

/ 单元格对齐 /
justify-items: stretch;
}

.column {
background-color: #EEEEEE;
text-align: center;
}
</style>


<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
<div class="column">6</div>
<div class="column">7</div>
<div class="column">8</div>
<div class="column">9</div>
</div>

12.png

参考

CSS Grid 网格布局教程

            </div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Grid网格布局学习笔记
Grid网格布局学习笔记
8 0
Grid网格布局学习笔记
Grid网格布局学习笔记
11 0
子图布局|学习笔记
快速学习子图布局
8 0
css:Grid网格布局学习笔记
css:Grid网格布局学习笔记
25 0
Grid网格布局学习笔记
Grid网格布局学习笔记
27 0
CSS绘图实现三角形并使用grid布局
CSS绘图实现三角形并使用grid布局
27 0
CSS绘图实现三角形并使用grid布局
CSS绘图实现三角形并使用grid布局
73 0
前端学习笔记(9)css grid网格布局
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。 容器属性 1. display属性 指定一个容器采用网格布局 div { display: grid; } div { display: inline-grid; //设置为行内元素 } 注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
987 0
WPF Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1、一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等。如上这种布局,在子元素数量未知的情况下,我们应该使用WrapPanel或者StackPanel来布局,子元素会自己换行。
755 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载