布局的神---网格布局最全总结,建议点赞收藏

网格布局

一、什么是网格布局

在这里插入图片描述

网格布局,顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面,我们可以切割成很多行很多列,形成一个个网格,从而对这些网格进行规则性的排序,使用,达到我们复杂的页面布局效果。

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,有主轴和侧轴之分,只能指定容器内子元素针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。

二.网格布局的使用

1.grid基本属性

在这里插入图片描述

网格容器和项目

首先,我们要知道网格布局也是有“容器”和“项目”的,既给容器设置上display: grid;或者display: inline-grid; 表明该容器是网格容器,这个元素的所有直系子元素将成为网格元素。

grid:指明该容器本身是块级元素,块级元素独占一行。

inline-grid :指明该容器本身是一个行内元素,行内元素可以和其他行内元素共占一行。

container是一个网格容器,item为网格元素。而grandson却不是网格元素,所以父容器只能影响儿子容器。

    <div class="container">
        <div class="item">
            <div class="grandson"></div>
        </div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
网格线 grid line

分隔网格结构的分界线。它们可以是垂直(‘列网格线’)或水平(‘行网络线’)

网格单元 grid cell

网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。

网格轨道 grid track

grid-template-columnsgrid-template-rows 属性来定义网格中的行和列。一个网格轨道就是网格中任意两条线之间的空间。

就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。

网格区域 grid area

多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。

2.父容器上的属性

首先肯定是 :display: grid | inline-grid | subgrid ;指定一个容器采用网格布局。

  • grid – 生成一个块级(block-level)网格
  • inline-grid – 生成一个行级(inline-level)网格
  • subgrid – 如果你的 grid container 本身就是一个 grid item(即,嵌套网格),你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小,而不是指定它自己的大小。
1. 网格轨道宽高

grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。在大小前面使用数组可以定义网格线的名称,可以有很多个名称。可写可不写,看需求。

 .container {
        width: 200px;
        height: 200px;
        display: grid;
     /* 定义了三列 每一行50px */
grid-template-columns: [first] 50px [line2]50px [line3]50px;
      /* 定义了三行 每一行50px */
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
    }

效果:

在这里插入图片描述

我们除了用绝对单位,还可以使用fr单位 , 一个 fr 单位代表网格容器中可用空间的一等份。也可以使用百分比,如果你定义了非常多行非常多列,还可以使用repeat()函数。也可以混合写。例如下面

grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 33.33%);//第一个参数是几份,后面可以说绝对单位,百分比,fr
grid-template-columns: repeat(3, 50px [col-start]);//携带网格线名字
grid-template-columns: repeat(2, 100px 20px 80px);//重复某种模式
grid-template-columns: 30% 50px auto;

注意:混合使用单位的时候,例如下面,fr为可用宽度减去50px后,得到的空间再进行等量的分配。

grid-template-columns: 1fr 50px 1fr 1fr;
2. 网格间距

grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距),grid-gap属性是grid-column-gapgrid-row-gap的合并简写形式。grid-gap: <grid-row-gap> <grid-column-gap>

    .container {
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: [first] 50px [line2]50px [line3]50px;
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
        grid-row-gap:5px;
        grid-column-gap:5px;
      /* grid-gap: 5px 5px;合并写法 */
    }

效果:

在这里插入图片描述

3.网格区域

通过引用 grid-area-name属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。

定义一个2*3的网格区域,并给上名字。可以使用任意数量的相邻的.来声明单个空单元格。 只要这些点号之间没有空格,他们就代表了一个单一的单元格。

  .container {
        margin-left: 30%;
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: [first] 50px [line2]50px [line3]50px;
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
        grid-row-gap:5px;
        grid-column-gap:5px;
        grid-template-areas: "head head "
                              ". main"
                            ". foot";
    }

效果:

在这里插入图片描述

注意

区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end

比如,区域名为header,则起始位置的水平网格线和垂直网格线叫做header-start,终止位置的水平网格线和垂直网格线叫做header-end

4.网格对齐方式

justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)。

指的是整个内容在容器中的排列方式

取值有:

  • start - 对齐容器的起始边框。
  • end - 对齐容器的结束边框。
  • center - 容器内部居中。
  • stretch - 项目大小没有指定时,拉伸占据整个网格容器。
  • space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
  • space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。
  • space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。

place-content属性是align-content属性和justify-content属性的合并简写形式place-content: <align-content> <justify-content>

    .container {
        margin-left: 30%;
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: repeat(3,50px);
        grid-template-rows: repeat(3,50px);
        grid-row-gap:5px;
        grid-column-gap:5px;
        background: #def1a9;
        justify-content: start;
        align-content: end;
    }

设置一个水平靠左,垂直靠底部。效果:

在这里插入图片描述

设置居中

justify-content: center;
align-content: center;

在这里插入图片描述

5.单元格对其方式

justify-items 属性设置单元格内容的水平位置(左中右),align-items 属性设置单元格的垂直位置(上中下)

取值:

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。

使用justify-items举一个例子:

justify-items: start --对齐单元格的起始边缘

在这里插入图片描述

justify-items: end–对齐单元格的结束边缘

在这里插入图片描述

justify-items: center; --水平居中

在这里插入图片描述

justify-items: stretch;(默认)拉伸,占满单元格的整个宽度。

在这里插入图片描述

6. grid-auto-flow

grid-auto-flow属性控制着自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行

如果改变为:

grid-auto-flow: column;

效果:

在这里插入图片描述

先看看能取哪些值

grid-auto-flow: row|column|dense|row dense|column dense;
描述
row默认值。 通过填充每一行来放置网格元素,在必要时增加新列。
column通过填充每一列来放置网格元素,在必要时增加新列。
dense该关键字指定自动布局算法使用一种"稠密"堆积算法,如果后面出现了稍小的元素,则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白,但同时也可能导致原来出现的次序被打乱。
row dense按行来填充网格中前面留下的空白
column dense按列来填充网格中前面留下的空白

指定自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。

什么意思呢?

当我创建了一个2*3的网格时候,我让第三个网格占有两个单元格宽度,代码如下

<body>
    <div class="grid-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        height: 100%;
    }
    .item3 {
        grid-column: auto / span 2;
    }
    .grid-container {
        width: 300px;
        height: 200px;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
        /* grid-auto-flow: row dense; */
    }
    .grid-container>div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }
</style>

在这里插入图片描述

当我给网格容器设置上grid-auto-flow: row dense;就会填充每一行上面留下来的空白。

在这里插入图片描述

当我让第三个占有三个宽度时候grid-column: auto / span 3;并设置grid-auto-flow: row ;就会补充一行,我前面只设置了2*3网格。

在这里插入图片描述

设置为grid-auto-flow: column;不足会补充一列。

在这里插入图片描述

补充:

grid-auto-columns属性和grid-auto-rows属性用来设置,浏览器自动创建的多余网格的列宽和行高。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。

7.grid-template属性、grid属性

grid-template属性是grid-template-columnsgrid-template-rowsgrid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow这六个属性的合并简写形式。

就我个人而言,我不喜欢简写,一两个同类型简写还可以,多个不同属性简写会导致可读性较差。看个人咯。

3. 项目上的属性

项目属性,顾名思义就是定义在父容器的儿子节点上的属性。

1. grid-column 属性, grid-row 属性

grid-column属性是grid-column-startgrid-column-end的合并简写形式,grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

这就是网格最有魅力的地方,我感觉。它可以指定项目的位置放在那个地方,就是说可以放在哪个网格区域,这样就让布局变得灵活、复杂起来。,具体方法就是指定项目的四个边框,分别定位在哪根网格线。

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

例如:

<body>
    <div class="container">
        <div class="item1">浪</div>
        <div class="item2">漫</div>
        <div class="item3">主</div>
        <div class="item4">义</div>
        <div class="item5">码农</div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        height: 100%;
    }
    .container {
        width: 300px;
        height: 200px;
        display: grid;
        grid-template-columns: repeat(3, 50px);
        grid-template-rows: repeat(3,50px);
        grid-gap: 5px;
        background-color: #2196F3;
        padding: 10px;
        justify-content: center;
        align-content: center;
    }
    .item1 {
        grid-column:1 / 3;
        background: #0F85CC;
    }
    .item2 {
        grid-row: 1 / 3;
        grid-column: 3 / 4;
        background: #1fe605;
    }
    .item3 {
        grid-row: 2/4;
        grid-column: 1/2;
        background: burlywood;
    }
    .item4 {
        grid-row: 3/4;
        grid-column: 2/4;
        background: #10caf9;
    }
    .item5 {
        border-radius: 50%;
        text-align: center;
        background: #E60537;
    }
</style>

效果:

在这里插入图片描述

没有指定网格线的话就是默认1,2,3…

有几种写法:

  • number: 可以是一个数字来指代相应编号的网格线,也可使用名称指代相应命名的网格线
  • span: 网格项将跨越指定数量的网格轨道
  • span: 网格项将跨越一些轨道,直到碰到指定命名的网格线
  • auto: 自动布局, 或者自动跨越, 或者跨越一个默认的轨道

例如:

.item-c {
  grid-column: 3 / span 2;//从第3条网格线开始,跨过两列
  grid-row: divname / 5;//从divname开始到第5条网格线
}
2.grid-area属性

grid-area属性指定项目放在哪一个网格区域。

grid-area属性还可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end的合并简写形式,直接指定项目的位置。

例如:

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

这里用法和上面一样不多解释。

3.justify-self 属性, align-self 属性, place-self 属性

justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。

align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。

place-self属性是align-self属性和justify-self属性的合并简写形式。

这里比较简单就演示一个,作用在子元素上,只会影响自己一个元素的排列

.item1{
        justify-self: start;
    }

在这里插入图片描述

到这里我们的网格布局就都介绍完了。

写在最后

最后再分享一个自己画的,用网格布局画一个奥运五环。下一篇贴代码和思路,觉得还不错的给小的就一键三连吧

在这里插入图片描述

🤺🏇🏂🏄‍♂️🏄‍♀️🚣🏊

你既然认准一条路,何必去打听要走多久呢

⛹️🏋️‍♀️🚴🚴‍♂️🚵🚵‍♀️🤸‍♀️🤼

Android网格布局是一种用于在应用中将控件整齐排列成若干行和若干列的布局方式。相比于线性布局的嵌套,网格布局更加简单方便。 在Android中,我们可以使用GridView来实现网格布局。GridView提供了一些常用的属性,可以控制网格布局的特点和子控件的样式。 网格布局的特点是可以按照设定的行数和列数来排列控件,使得整个界面更加整齐美观。通过继承关系图可以看出,GridView是继承自AbsListView的。 我们可以使用网格布局来创建各种界面,例如计算器界面。在案例演示中,我们可以通过创建安卓应用、准备背景图片、字符串资源文件、自定义边框配置文件、主布局资源文件等步骤来实现一个计算器界面,并启动应用查看效果。 总结来说,Android网格布局是一种用于将控件整齐排列的布局方式,通过GridView来实现,可以根据需求对行数、列数和子控件样式进行设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [安卓讲课笔记3.4 网格布局](https://blog.csdn.net/howard2005/article/details/126895651)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Android网格布局GridView学习使用](https://download.csdn.net/download/weixin_38506138/12766686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值