HTML布局之grid布局

article/2025/10/6 8:54:34

1. 关于grid布局

1.1 什么是grid布局

grid布局：grid布局是非常强大的css布局，它将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

1.2 容器和项目的基本概念

  • 容器：整个采用网格布局的区域叫做容器（container）
  • 项目：容器内部采用网格定位的子元素叫做项目（item）

1.3 行、列、网格线、单元格、轨道的基本概念

行列 网格线 单元格

  • 行、列：容器中划分的水平区域叫做行，如上图粉色区域；垂直划分区域叫做列，如上图黄色区域。
  • 单元格：行和列的交叉部分叫做单元格，如上图紫色覆盖区域，一般来说n行 m列会产生n x m个单元格。
  • 网格线：划分区域的线叫做网格线，如上图桔黄色的线，一般来说，n行会有n+1根水平的网格线，m列同样有m+1根垂直的网格线。
  • 轨道：两根网格线之间的空间

2.容器属性

2.1 display属性

display：grid可以指定采用网格布局
正常布局下的9个div
在body里写了9个div，一般情况下的表现形式如上图所示，现在给body设置display属性，
在这里插入图片描述

<style>body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;}

设置display以后，div占满了body，现在需要我们划分行和列。

2.2 grid-template-columns ；grid-template-rows；grid-template （设置行、列）

grid-template-columns：定义网格布局中的列数，并可定义每列的宽度
grid-template-rows ：定义网格布局的行数以及行高
grid-template ：是grid-template-rows ，grid-template-columns简写
grid-template: grid-template-rows/grid-template-columns
例如：grid-template: repeat(3,200px)/repeat(3,100px);（创建一个三行每行高度200px 三列每列宽度100px 的网格）

现在划分一个三行三列的网格，行高和列宽均为100px的网格布局

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}

三行三列网格的展示效果
该属性其他取值：
（1）百分比（length）：占用容器的百分之多少

（2）repeat：重复，他需要两个参数，第一个是划分了几行或几列，第二个是重复的值，
如果划分了三行，并且每行行高100px，那么就可以用repeat来写：grid-template-rows:repeat（3,100px）

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,100px);grid-template-rows: repeat(3,100px);}

展示效果
和我们每一项罗列出来效果是一样的。
（3） auto : auto关键字表示由浏览器自己决定长度

body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns:auto 100px  auto;grid-template-rows: repeat(3,100px);}

展示效果
（4）minmax：它表示一个长度范围，接受两个参数，一个是最小值，一个是最大值：

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns:auto 100px  auto;grid-template-rows: repeat(3,minmax(150px,300px));}

minmax展示效果
（5）min-content；max-content
min-content：以网格项的最大的最小内容来占据网格轨道
max-content：以网格项的最大的内容来占据网格轨道
（6）fr关键字：这个单位用来表示分配剩余的空间，例如：grid-template-columns: 100px 4fr 1fr，表示第一列宽100px，剩余的空间分为5份，第二列宽是第三列的四倍。

body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: 100px 4fr 1fr;grid-template-rows: repeat(3,minmax(150px,300px));}

fr展示效果
（7）auto-fit；auto-fill
相同点：

  • 都会尽可能多的创建轨道
  • 不足一个轨道的空间平均分配给已有的轨道
    区别：
  • auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道
  • auto-fill的最后一步时保留空轨道留白，不会折叠空轨道
    注意：auto-fit 和 auto-fill 只有在容器宽度大于子元素的最小宽度总和时才有显示区别
    auto-fill的演示效果：
  body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(auto-fill,minmax(90px, 1fr));grid-template-rows: repeat(auto,100px);}

auto-fill的演示效果
auto-fit的演示效果：

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(auto-fit,minmax(90px, 1fr));grid-template-rows: repeat(auto,100px);}

auto-fit的演示效果

2.3 grid-row-gap，grid-column-gap ；grid-gap

  • grid-row-gap：设置行间距
  • grid-column-gap：设置列间距
  • grid-gap：是grid-row-gap和grid-column-gap的简写形式，
    书写格式：grid-gap: < grid-row-gap> < grid-column-gap>;
 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);grid-gap: 20px 20px;}

grid-gap展示效果

2.4 justify-content；align-content

  • justify-content:整个内容区域在容器里面的水平位置
  • align-content: 整个内容区域的垂直位置
  • justify-content和align-content的取值是相同的，包括：start 、end、center 、stretch 、 space-around 、 space-between、space-evenly
    （1）stretch：项目大小没有指定时，拉伸占据整个网格容器。
body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,minmax(100px,2fr));grid-template-rows: repeat(3,minmax(150px,1fr));justify-content:stretch;align-content:stretch;}

seretch的展示效果
（2）start：将网格对齐到网格容器的起始边缘：

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);justify-content:start;align-content:start;}

start展示效果
（3）end：将网格对齐到网格容器的结束边缘：

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);justify-content:end;align-content:end;}

end展示效果
（4）center：将网格对齐到居中位置：

body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);justify-content:center;align-content:center;}

center居中展示效果
（5） space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔：

body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);justify-content:space-evenly;align-content:space-evenly;}

space-evenly展示效果
（6）space-between ：项目与项目的间隔相等，项目与容器边框之间没有间隔：

  body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);justify-content:space-between;align-content:space-between;}

space-between展示效果
（7）space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍：

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);justify-content:space-around;align-content:space-around;}

space-around展示效果

3.项目属性

3.1 grid-column-start 属性；grid-column-end 属性；grid-row-start 属性；grid-row-end 属性

  • grid-column-start 属性：单元格左边框所在的垂直网格线
  • grid-column-end 属性：单元格右边框所在的垂直网格线
  • grid-row-start 属性：单元格上边框所在的水平网格线
  • grid-row-end 属性：单元格下边框所在的水平网格线
    项目的位置是可以指定的，指定它的边框定位在哪根网格线就可以指定项目位置，需要注意的是，没指定的边框位置否是采取默认值的。
    在这里插入图片描述
    比如：现在我们希望上图包含“a”的div占满第一行三个格子，高度不变，我们就需要设置div1的左边框在第一根网格线，右边框在第四根网格线：
 .div1{background-color: hotpink;grid-column-start:1;grid-column-end:4;}

在这里插入图片描述
现在，我们想让a占到bcef的位置，我们可以设置左边框在第1根网格线，右边框在第3根网格线，上边框在第2根网格线，下边框在第4根网格线：

.div1{background-color: hotpink;grid-column-start:1;grid-column-end:3;grid-row-start: 2;grid-row-end: 4;}

在这里插入图片描述
这四个属性的值除了直接指定网格线之外，还可以使用“span”直接跨越单元格，比如，我们希望a可以跨越第一行和第二行的前两个方格，那么我们就可以直接使用“span”：

 .div1{background-color: hotpink;grid-column-start:span 2;grid-row-start:span 2;}

在这里插入图片描述

3.2 grid-column 属性；grid-row 属性

  • grid-column 属性：是grid-column-start和grid-column-end的缩写
    grid-column: < start-line> / < end-line>；
  • grid-row 属性：grid-row-start属性和grid-row-end的缩写
    grid-column:grid-row: < start-line> / < end-line>;
    比如说现在a想跨越第一行和第二行的前三个格子：
 .div1{background-color: hotpink;grid-column:1/4;grid-row:1/4;}

在这里插入图片描述

3.3 grid-area 属性

grid-area：指定内容放在哪个区域，可使用grid-row-start、grid-column-start、grid-row-end、 grid-column-end的合并简写形式，直接指定项目的位置，
书写格式： grid-area: < row-start> / < column-start> / < row-end> /
< column-end>;
比如说，现在我们想将a放在，正中间的格子里，我们可以在div1里面设置grid-area：

 .div1{background-color: hotpink;grid-area: 2/2/3/3;}

在这里插入图片描述

3.4 justify-self 属性；align-self 属性；place-self 属性

  • justify-self: 属性设置单元格内容的水平位置（左中右）
    start、 end、 center 、stretch（默认值）
  • align-self:属性设置单元格内容的垂直位置（上中下）
    start 、 end 、 center、stretch（默认值）;
  • place-self:属性是align-self属性和justify-self属性的合并简写形式
    书写格式：place-self:center center;
    注意：place-self需要两个值，如果我们忽略了一个值，那么会默认为两个值是相等的。
    比如说：现在我们希望“a的内容”在单元格的正中央：
.div1{background-color: hotpink;place-self: center center;/* justify-self: center;align-self: center; 全称*/}

在这里插入图片描述

3.5 grid-auto-flow 属性

grid-auto-flow：划分网格之后元素会自动放入格子里，默认值是“row”，即是“先行后列”，这个属性可以设置元素放入格子的顺序是"先行后列"还是"先列后行"。column表示"先列后行"。
默认效果：
默认效果
grid-auto-flow的值设置为column：

 body{width: 900px;height: 600px;margin: auto;border: chartreuse solid 5px;display: grid;grid-template-columns: repeat(3,150px);grid-template-rows: repeat(3,150px);justify-content:space-around;align-content:space-around;grid-auto-flow: column;}

column展示效果


http://chatgpt.dhexx.cn/article/j4GvU3NK.shtml

相关文章

html5手机端页面布局,移动端H5常见的布局方式有哪些

html5手机端页面布局,移动端H5常见的布局方式有哪些

随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配 移动端设备屏幕尺寸非常多，碎片化严重，Android和苹果设备有多种分辨率：480x800, 48…
阅读更多...
HTML表格布局

HTML表格布局

HTML中可以在网页上制作表格 表格标签 <table> ------- 用于定义一个表格 &#xff1b; <thead> ---- 定义表头&#xff1b; <tr> ---- 行&#xff1b; <td> ---- 列 单元格 必须放在 tr&#xff1b; <tbody> --- 主干&#xff1b; <tfo…
阅读更多...
HTML5学习（三）：布局标签、列表、超链接和id

HTML5学习（三）：布局标签、列表、超链接和id

1、布局标签 header表示网页的头部&#xff08;页眉&#xff09;main表示网页的主体部分&#xff08;一个页面中只会有一个main&#xff09;footer表示网页的底部&#xff08;页脚&#xff09;nav表示网页中的导航aside和主体相关的其他内容&#xff08;侧边栏&#xff09;art…
阅读更多...
网页整体布局基本模板

网页整体布局基本模板

一、效果 二、代码 1、html文件 <!DOCTYPE> <html><head><meta charset"utf-8"/><title>网页名称</title><link rel"stylesheet" href"html5.css"></head><body><header><h1&…
阅读更多...
前端开发_HTML5_布局-响应式布局

前端开发_HTML5_布局-响应式布局

响应式布局 1.引入 我们通过之前的学习&#xff0c;学习了多种不同的布局方式。我们学习布局是为了解决页面样式的问题。我们知道HTML5不仅仅可以在电脑端显示&#xff0c;而且它还可以在手机端和平板端显示&#xff0c;但是我们会发现一个问题&#xff0c;当我们在电脑端调整…
阅读更多...
html的表格布局

html的表格布局

一、表格的属性 在 HTML 中&#xff0c;我们使用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的&#xff0c;都包括行、列、单元格、表头等元素。除此之外还可以为你的制作有更好的呈现效果。 定义表头thead行tr列td主干tbody尾tfoot边框border表格宽…
阅读更多...
HTML5 弹性布局

HTML5 弹性布局

弹性布局 弹性布局相关属性 flex-direction相关属性 flex-wrap相关属性 justify-content相关属性 align-items相关属性 align-content相关属性 样例Demo 弹性布局相关属性 属性说明display值为flex时&#xff0c; 创建弹性布局容器flex-direct…
阅读更多...
MySQL的缓存使用

MySQL的缓存使用

MySQL的缓存功能,在开启时,执行相同的SQL查询语句时,会直接中获取结果集返回,当数据被修改,删除,新增等操作后, 缓存被清除. 1 MySQL语句执行的流程 1 客户端向服务端发起查询, 将查询SQL发给MySQL服务器. 2 服务器先查看缓存中是否存在,缓存命中,则直接返回. 3 服务器进行SQ…
阅读更多...
缓存（本地缓存、分布式缓存）与数据库之间的数据一致性问题

缓存（本地缓存、分布式缓存）与数据库之间的数据一致性问题

点击上方“Java基基”&#xff0c;选择“设为星标” 做积极的人&#xff0c;而不是积极废人&#xff01; 每天 14:00 更新文章&#xff0c;每天掉亿点点头发... 源码精品专栏 原创 | Java 2021 超神之路&#xff0c;很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应…
阅读更多...
MySQL缓存机制

MySQL缓存机制

1. MySQL缓存简介 MySQL缓存机制说明 MySQL缓存机制即缓存sql 文本及缓存结果&#xff0c;用KV形式保存再服务器内存中&#xff0c;如果运行相同的sql&#xff0c;服务器直接从缓存中去获取结果&#xff0c;不需要再去解析、优化、执行sql MySQL缓存失效 在表的结构或数据发生…
阅读更多...
为什么数据库缓存如此重要？

为什么数据库缓存如此重要？

您在数据库中拥有的信息越多&#xff0c;它随着时间的推移就会越慢。即使是为支持许多并发请求而精心设计的数据库管理系统也将最终达到极限。 数据库缓存是处理这些性能问题的最常见策略之一。缓存涉及将数据库查询的结果保存在更快&#xff0c;更容易访问的位置。正确完成后…
阅读更多...
缓存 （模拟两种：数据库提供数据到缓存、外界提供数据到缓存）

缓存 （模拟两种：数据库提供数据到缓存、外界提供数据到缓存）

一、缓存的作用 因此就有了缓存的作用&#xff1a; 代码模拟上面缓存的作用如下所示&#xff1a; 就拿以前我们做的通过id查询单条数据功能&#xff1a; 当开启服务器后&#xff0c;客户端访问该通过id查询单条数据功能时&#xff08;假设连续访问两次&#xff09;&#xff1a…
阅读更多...
mysql的查询缓存

mysql的查询缓存

提高单台节点的性能无外乎就那么几种方式&#xff0c;缓存是首当其冲的&#xff0c;因为内存的性能比磁盘高的太多。缓存也是一种典型的空间换时间的策略 缓存的实现也有太多的方式&#xff0c;从静态页面缓存到服务端动态缓存&#xff0c;再到数据库级别缓存等等。随着大数据的…
阅读更多...
缓存（本地缓存、分布式缓存）与数据库之间的数据一致性问题？

缓存（本地缓存、分布式缓存）与数据库之间的数据一致性问题？

在现在的系统架构中&#xff0c;缓存的地位可以说是非常高的。因为在互联网的时代&#xff0c;请求的并发量可能会非常高&#xff0c;但是关系型数据库对于高并发的处理能力并不是非常强&#xff0c;而缓存由于是在内存中处理&#xff0c;并不需要磁盘的IO&#xff0c;所以非常…
阅读更多...
mysql数据库缓存

mysql数据库缓存

一、开启缓存 mysql 开启查询缓存可以有两种方法来开启一种是使用set命令来进行开启&#xff0c;另一种是直接修改my.ini文件来直接设置都是非常的简单的哦。 开启缓存&#xff0c;设置缓存大小&#xff0c;具体实施如下&#xff1a; 1、修改配置文件my.ini windows下是my.i…
阅读更多...
mysql 缓存机制

mysql 缓存机制

mysql缓存机制就是缓存sql 文本及缓存结果&#xff0c;用KV形式保存再服务器内存中&#xff0c;如果运行相同的sql,服务器直接从缓存中去获取结果&#xff0c;不需要在再去解析、优化、执行sql。 如果这个表修改了&#xff0c;那么使用这个表中的所有缓存将不再有效&#xff0c…
阅读更多...
数据库缓存层

数据库缓存层

一 常见的缓存形式 : 1.文件缓存 (为了避免I/O开销,尽量使用内存缓存) 2.内存缓存 二 为什么要使用缓存 缓存数据是为了让客户端很少甚至不访问数据库服务器进行的数据查询,高并发下,能最大程度降低对数据库服务器的访问压力 一般的数据请求: 用户请求->数据查询->…
阅读更多...
SQL查询缓存

SQL查询缓存

适合读者 本教程适合于那些对缓存SQL查询以减少数据库连接与执行的负载、提高脚本性能感兴趣的PHP程序员。 概述 许多站点使用数据库作为站点数据存储的容器。数据库包含了产器信息、目录结构、文章或者留言本&#xff0c;有些数据很可能是完全静态的&#xff0c;这些将会从一个…
阅读更多...
数据库之查询缓存

数据库之查询缓存

查询缓存配置 查看当前的MySQL数据库是否支持查询缓存SHOW VARIABLES LIKE have_query_cache; 查看当前MySQL是否开启了查询缓存SHOW VARIABLES LIKE query_cache_type; 查看查询缓存的占用大小SHOW VARIABLES LIKE query_cache_size; 查看查询缓存的状态信息show status li…
阅读更多...
数据库缓存

数据库缓存

一、什么是数据库缓存 我们知道常见的数据库&#xff0c;比如oracle、mysql等&#xff0c;数据都是存放在磁盘中。虽然在数据库层也做了对应的缓存&#xff0c;但这种数据库层次的缓存一般针对的是查询内容&#xff0c;而且粒度也太小&#xff0c;一般只有表中数据没有变更的时…
阅读更多...
推荐文章

Copyright @ 2022~2023