百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

小白都觉得好用的CSS布局属性Grid

xsobi 2024-11-23 10:46 3 浏览

前面我学习了Flex布局之后感觉是真的爽啊，比之前用浮动，定位方便太多了，之前几十行代码才能写完的布局，用了Flex10行左右就搞定了，今天学了Grid发现比Flex更爽，代码写的还要少，真是太厉害了，现在我把学习的相关知识梳理了一下，给大家分享一下，同时也可以作为我日后复习的笔记。

一、认识Grid属性

1.Grid容器属性：

属性说明：

grid-template-columns 轨道列宽

grid-template-rows 轨道行高

gap 轨道间距

grid-auto-columns 隐式轨道的列宽

grid-auto-rows 隐式轨道的行高

grid-auto-flow 隐式轨道排列方式，默认行优先

1.认识网格容器/网格项目/网格轨道/轨道间距

首先我们写出一个html结构，声明它的样式为网格布局：display:grid;

<div class="container">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
  • 效果图：

由此可见，之前的span元素为行内元素，在声明了网格布局之后，全部变为了块元素。
与之前的flex布局不一样，flex布局是行内元素。

以下是创建了一个2行3列的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格容器/网格项目/网格轨道/轨道间距</title>
    <style>
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            grid-template-columns: auto;
            grid-template-columns: 10em 10em auto;
            grid-template-rows: 5em 5em;
            gap: 0.5em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>
</html>
  • 效果图：

通过上述案例我可以学习到网格布局的相关属性用法：

  1. 使用display: grid;声明一个网格布局，其中.container称为网格容器，其子元素span称为网格项目。
  2. 设置轨道的列宽：grid-template-columns：10em 10em auto，意思是声明了一个三列的网格布局，auto表示剩下的布局自适应。
  3. 设置轨道的行高：grid-template-rows：5em 5em，意思是声明了一个两行的网格布局，高度都是5em
  4. 设置轨道的间距：gap: 0.5em 0.5em，声明了轨道之间的间距，可以简写成gap:0.5em。
  5. 网格项目：网格容器中的“子元素”，与flex是一样的，默认生成一列N行的容器（N就是项目的数量）。
  • 总结：
  1. 网格容器：由若干个矩形网格单元构成；
  2. 网络项目：网格容器的子元素，必须放在网格单元中；
  3. 网格单元：有“单元格”和“网格区域”两种表现形式；
  4. 网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”之分；
  5. 轨道间距：容器中轨道之间的间距,有"行轨间距","列轨间距"。

2.自定义项目属性：

grid-area语法：grid-row-start / grid-column-start / grid-row-end / grid-column-end;

编号从左上角开始（1,1）并且是递增的。

相关属性说明：

  • grid-row-start 项目的起始行；
    grid-column-start 项目的起始列；
    grid-row-end 项目的结束行；
    grid-column-end 项目的结束列。

2.自定义项目在容器中的显示位置

首先，还是先创建一个网格布局的html结构：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
</div>

给出以下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 行优先时要设置隐式轨道的行高 */
    grid-auto-rows: 5em;
    /* 轨道间距 */
    gap: 0.5em 1em;
}

.container > .item {
    background-color: lightcyan;
    border: 1px solid #000;
    padding: 0.5em;
}
</style>
  • 效果图：

现在我们以第5个项目来举例，将它移动到第一个网格单元中：

<style>
.container .item:nth-of-type(5) {
    background-color: lightyellow;
    /* item5的默认位置 */
    grid-area: 2 / 2 / 3 / 3;
    /* 将它放入到第一个网格单元中 */
    grid-area: 1 / 1 / 2 / 2;
}
</style>

由于默认项目是跨越一行一列的，所以可以简写成下面的格式：

grid-area: 1 / 2;
  • 效果图：

但是，如果是跨越1行1列以上的，就不能省略了。例如要跨越2行3列，就必须写成下面的格式：

grid-area: 1 / 1 / 3 / 4;

通常的情况是我们只关心跨越几行几列，并不关心它的结束行号，所以还可以这样写：

grid-area: 1 / 1 / span 2 / span 3;

所以，上述两种写法的效果是一样的。

  • 效果图：

再以第1个项目为例，有如下样式：

<style>
    /* 添加一个浅绿色背景便于区分 */
    background-color: lightgreen;
    /* 默认位置 */
    grid-area: 1 / 1 / 2 / 2;
</style>
  • 效果图：

如果现在要跨1行3列，可以写成如下格式：

grid-area: 1 / 1 / span 1 / span 3;

因为item1默认的位置是1 / 1，所以上述样式可以简写成：

grid-area: span 1 / span 3;

之前说过，项目默认的是跨1行1列，所以，可以简写成如下格式：

grid-area: auto / span 3;

由以上案例可以得出结论：

grid-area：参数数量不同，意义不同

1. 值中只有span

  • 单值： 跨的行数。
  • 双值： 跨的行与列数，如果只想设置列数，就必须设置行数（auto—）。

2. 值中有span和编号

  • 双值：没有span，默认跨1行1列，grid-area： 2 / 3；
  • 2.2 三值：省略列结束编号或跨的数量，此时前面的值可使用auto；
  • 2.3 四值：最完整的语法。

3.网格单元尺寸的新单位：fr
设置轨道宽度时可以用一个新单位:fr(fraction)，类似于flex中的伸缩因子。

现有如下网格布局：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
</div>

给出如下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: 10em 10em 10em;
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 轨道间距 */
    gap: 0.5em;
}
</style>
  • 效果图：

此时我们可以在设置轨道宽度的时候使用一个新单位：fr（fraction），类似于flex的伸缩因子

grid-template-columns: auto auto auto;
  • 效果图：

以上属性设置了一个自适应的3列等宽的布局，如果现在出现一个新的需求，中间一列的宽度是两边的二倍，那么auto就无法满足了，但是fr可以完美解决这个问题：

grid-template-columns: 1fr 2fr 1fr;
  • 效果图：
  • 总结：
  1. % 与 fr可以共存，计算方式：总宽度减去百分比宽度，剩下的宽度都分给fr；
  2. px是固定的，em也是固定的，计算时要减去这些固定值，将剩下的空间都分给fr；
  3. auto，fr，% 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现；
  4. auto 与 px，em同时使用会自动计算。

4.网格单元尺寸的常用函数：repeat(),minmax()

还是跟上面案例一样的初始样式，现在如果我要设置一个3列10em宽度的布局，可以利用repeat()函数这样写：


grid-template-columns: repeat(3, 10em);

等价于下面的写法：

grid-template-columns: 10em 10em 10em;

repeat()的第二个参数可以是多个值

grid-template-columns: repeat(3, 10em 2em);

等价于下面的写法：

grid-template-columns: 10em 2em 10em 2em 10em 2em;

repeat()函数还可以与fr混合使用：

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

等价于下面的写法：

grid-template-columns: 1fr 1fr 2fr;

3.minmax()函数

中间列，最小宽度是20em，最大宽度是左右的2倍

grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
  • 效果图：
grid-template-columns: 20em minmax(20em, 1fr);
  • 效果图：

当使用1fr时，auto效果也一样，即使写成5fr也是可以的。

grid-template-columns: 20em minmax(20em, 1fr);
grid-template-columns: 20em minmax(20em, 5fr);
grid-template-columns: 20em minmax(20em, auto);

以上三种写法效果完全一样。

  • 效果图：

5.网格单元的排列方式与隐式轨道

现有如下的html结构和样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格单元的排列方式与隐式轨道</title>
    <style>
        /* 网格容器 */
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            display: grid;
            /* 轨道列宽 */
            grid-template-columns: repeat(3, 1fr);
            /* 轨道行高 */
            grid-template-rows: 5em 5em;
            /* 轨道间距 */
            gap: 0.5em 1em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
</body>
</html>
  • 效果图：

此时声明的网格单元数量已经不够存放网格项目了，多出的三个项目会自动放入到自动生成的网格空间中了,这时，原来声明的网格单元叫做：显示轨道，新项目显示的轨道称为：隐式轨道。

此时，默认项目在容器中按照先行后列的顺序排列，即：“行优先”。

grid-auto-flow: row;

自动生成的隐式轨道的高度是自动的，因此，行优先时要设置隐式轨道的行高。

grid-auto-rows: 5em;
  • 效果图：

列优先时，需要设置隐式轨道的列宽：

grid-auto-flow: column;
grid-auto-columns: 1fr;
  • 效果图：

以上就是Grid布局的基本知识，个人感觉难度不是很大，就是属性有点多，需要花时间去牢记，多写一些布局，模仿一些网站这样对于掌握这些知识会有很大的帮助，这两天准备学习完Flex和Grid布局之后仿一个京东手机端的页面练练手。

如果有跟我一样才学习这些基础知识的朋友大家可以相互交流一下。

相关推荐

js向对象中添加元素(对象，数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧，如何去重对象数组?(一)

大家好，关于数组对象去重的业务场景，想必大家都遇到过类似的需求吧，这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一：使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的，对数组应该都不会陌生，于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string，也是一种动态数组。能够在运行阶段设置vector对象的长度，可以在末...

如何用sessionStorage保存对象和数组

背景：在工作中，我将[{},{}]对象数组形式，存储到sessionStorage，然后ta变成了我看不懂的形式，然后我想取之用之，发现不可能了～记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0，第二个索引值为1，以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同，数组中可以存储一组有序的数据，-数组中存储的数据我们称其为元素（element）-数组中的每一个元素都有一...

数组和对象方法&amp;数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法？数组：arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组，而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量，例如int...

ElasticSearch第六篇:复合数据类型-数组，对象

在ElasticSearch中，使用JSON结构来存储数据，一个Key/Value对是JSON的一个字段，而Value可以是基础数据类型，也可以是数组，文档（也叫对象），或文档数组，因此，每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量：有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢？这个著名的问题可以方便地通过一种树搜索方法来解决。首先，我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中，皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

（defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序，加载方法如下：在菜单栏选择工具——加载应用程序——添加，选择lisp程序然后加载，然后选择添加到启动组。2、然后是添加自定义栏以及图标，方法如下（以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述，本文中的图指的是下图所示的无向图。搜索指：搜索从S到F的一条路径。若存在，则以表的形式返回路径；若不存在，则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中，函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数；甚至可以和另一个Lisp函数组成一个整体，并加以利用。Lisp的宏，是实现上述特色的...

一周热门
最近发表
标签列表