ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

栅格系统布局学习

2022-01-29 03:00:17  阅读:164  来源: 互联网

标签:repeat 布局 学习 栅格 grid template 对齐 元素


声明容器

选项 说明
display: grid; 块级容器
display: inline-grid; 行级容器

划分行列

栅格有点类似表格,也 。使用 grid-template-columns 规则可划分列数,使用 grid-template-rows 划分行数。

重复设置

使用 repeat 统一设置值,第一个参数为重复数量,第二个参数是重复值

image-20220128142508321

display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px);

自动填充

image-20220128143117792

width: 300px;
height: 240px;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);//6 div

比例划分

image-20220128143442953

width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr 2fr);

组合定义

注意:grid-tempaltegrid-template-rowsgrid-template-columnsgrid-template-areas 的三个属性的简写。

image-20220128143442953

display: grid;
grid-template: repeat(2, 1fr) / repeat(2, 1fr 2fr);

设置取值范围

使用 minmax 方法可以设置取值范围,下列在行高在 最小100px ~ 最大1fr 间取值。

width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px minmax(100px, 1fr);//最小100px,最大无穷大
grid-template-columns: 100px 1fr;

间距定义

image-20220128145609722

grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 20px;
//简写如下
gap: 20px 10px;

合并单元格

image-20220128151931765

div:last-child{
      grid-row-start: 1; //第一行开始
      grid-column-start: 1; //第一列开始
      grid-row-end: 3;  //第三行结束
      grid-column-end: 2;  //第二列结束
    }
//简单写法1
grid-row: 1/3;
grid-column: 1/2;
//简单写法2
grid-area: 1/1/3/2;

栅格流动

在容器中设置grid-auto-flow 属性可以改变单元格排列方式。

选项 说明
column 按列排序
row 按行排列
dense 元素使用前面空余栅格(下面有示例说明)

image-20220128170327616

grid-auto-flow: row dense;

元素对齐方式

可以通过属性方便的定义栅格或元素的对齐方式

选项 说明 对象
justify-content 所有栅格在容器中的水平对齐方式,容器有额外空间时 栅格容器
align-content 所有栅格在容器中的垂直对齐方式,容器有额外空间时 栅格容器
align-items 栅格内所有元素的垂直排列方式 栅格元素
justify-items 栅格内所有元素的横向排列方式 栅格元素
align-self 对一个元素在栅格中垂直对齐方式 栅格元素
justify-self 对一个元素在栅格中水平对齐方式 栅格元素

justify-content/align-content属性的值如下

说明
start 容器左边
end 容器右边
center 容器中间
stretch 撑满容器
space-between 第一个栅格靠左边,最后一个栅格靠右边,余下元素平均分配空间
space-around 每个元素两侧的间隔相等。所以,栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly 栅格间距离完全平均分配
简写:place-content:垂直 水平;

justify-items/align-items属性的值如下

说明
start 元素对齐栅格的左边
end 元素对齐栅格的右边
center 元素对齐栅格的中间
stretch 水平撑满栅格
简写:place-items:垂直 水平;

justify-self与align-self属性的值如下

说明
start 元素对齐栅格的左边
end 元素对齐栅格的右边
center 元素对齐栅格的中间
stretch 水平撑满栅格
简写:place-self:垂直 s

标签:repeat,布局,学习,栅格,grid,template,对齐,元素
来源: https://www.cnblogs.com/1kxj/p/15854241.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有