web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

display:grid页面网格布局常用的属性介绍

497 ℃

CSS语法中的display: grid是一种将网页划分为一系列的网格,然后可以任意组合这些网格,创造出各种复杂的布局。与以前的CSS框架相比,display: grid现在是浏览器内置的,这意味着不需要依赖外部库就可以使用它。布局如下图:

grid页面网格布局

当一个元素被设置为display: grid时,它变成了一个网格容器(Grid Container),所有直接子元素都会自动成为网格项(Grid Item)。这个网格容器内部的空间被划分成行和列,形成了网格线(Grid Line)和网格轨道(Grid Track)。两个相邻的网格线之间的空间被称为一个网格单元(Grid Cell),它是网格中最小的独立单位。

与Flex布局相比,Grid布局更加二维化。Flex布局是一维布局,只能指定项目在轴线上的位置。而Grid布局则可以在行和列两个方向上同时进行布局,因此更加灵活和强大。

grid常用的属性介绍

1、指定容器使用网格布局:display: grid

2、指定容器设为行内元素并使用网格布局:display: inline-grid

3、定义每一列的列宽:grid-template-columns

4、定义每一行的行高:grid-template-row

5、重复赋值:repeat(次数,值);

6、自动填充:如:repeat(auto-fill,30px)

7、比例:fr(如 grid-template-columns: 1fr 2fr;意思是容器分为2列,二列的宽度是一列的2倍);

8、长度范围:minmax()

9、自动填充剩余空间(不设置最大值最小值的情况下):auto

10、网格线名称,同一根线可以有多个名称: grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

11、行间距:grid-row-gap

12、列间距:grid-column-gap

13、间距:grid-gap:行间距数值 列间距数值行间距和列间距数值相同可只写一个值;

14、区域:b到h的分别对应七个区域。.表示第一个区域不用;h表示两个区域合并;每个区域的起始网格线自动命名为区域名-start,终止网格线自动命名为区域名-end;

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

15、填充顺序:grid-auto-flow默认是row,即先填满第一行再填下一行;也可设置为column变成先填满第一列再填第二列;row densecolumn dense表示尽量填满不出现空白

16、单元格内容的水平位置、垂直位置;默认stretch,即填满整个单元格

justify-items: start | end | center | stretch;/*水平位置*/
align-items: start | end | center | stretch;/*垂直位置*/
place-items: '水平位置' '垂直位置';/*参数相同可只写一个值*/

17、内容块在网格容器的水平位置、垂直位置;默认stretch,即填满整个单元格

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:'水平位置' '垂直位置';/*参数相同可只写一个值*/
space-around  : 单元格两侧的间隔相等,是单元格与容器边框的间隔的两倍。
space-between : 单元格间隔相等,单元格与容器边框之间没有间隔。
space-evenly  : 单元格间隔和单元格与容器边框的间隔相等。

18、指定项目外的单元格属性:grid-auto-columnsgrid-auto-rows
19、合并属性

grid-template: grid-template-columns grid-template-rows  grid-template-areas
grid: grid-template-rows grid-template-columns grid-template-areas  grid-auto-rows grid-auto-columns grid-auto-flow

20、项目根据网格线定位,可使用z-index

grid-column-start:2;
grid-column-end:3;
/*相当于*/
grid-column:2 / 3

grid-row-start:4;
grid-row-end :5;

21、指定项目放在哪一个区域: grid-area: a; grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

22、设置单元格内容的水平、垂直位置,只作用于单个项目

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;

display有哪些常用属性值,grid布局和flex布局的区别?

jquery如何检测到是否存在隐藏标签

标签: display, grid布局

上面是“display:grid页面网格布局常用的属性介绍”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_13886.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > 前端知识
本文共计2147个字,预计阅读时长15分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一个可以查询老黄历的网站,可以根据五行取名!
下一篇: 详细介绍HTTP状态码不同之处的原因(什么原因导致的)
x 打工人ai神器