【JavaWeb】——grid布局

已于 2023-09-22 20:49:33 修改
阅读量1.1k 收藏 6
点赞数
分类专栏： JavaWeb 文章标签： html css 前端 web
于 2023-04-04 11:44:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mxyjsu2021/article/details/129886016
版权

目录

1.grid布局的含义

2.grid布局中的基础概念

3.grid布局中的容器属性

 3.1 容器触发网格

 3.2 设置行列

（1）初数值

 （2）百分比

 （3）以 fr 为单位的数据（作为分配可用空间的比例系数）

 （4) repeat() 函数

 （5）自动填充

 （6）minmax(min,max)函数

 （6）auto自动

 3.3 调整间距

 3.4 grid-auto-flow元素排布

3.5 对齐方式

3.5.1 项目位于单元格中的对齐方式

 ​编辑

 3.5.2 网格位于容器中的对齐方式

 ​编辑

 4.grid布局中的项目属性

4.1 合并单元格

1.grid布局的含义

grid布局，也被称为网格布局，是将页面中的父元素划分成一个一个的小格子，然后通过这些小格子进行合并来制作出各种不同的效果。

2.grid布局中的基础概念

grid容器：采用grid布局的父元素

grid内容：显示项目的区域

grid项目：grid布局中每一个格子内部放置的元素

行：横向

列：纵向

网格线：网格布局中的横向和纵向的线条

单元格：横纵线交汇的区域被称为单元格

间距：网格与网格之间的距离

3.grid布局中的容器属性

 3.1 容器触发网格

将某个元素的display属性设置为grid或者incline-grid，那么这个元素就会成为grid父容器，它的子元素将成为grid子元素。

属性说明
grid块网格
incline-grid行内块网格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下： 

 3.2 设置行列

行属性：grid-template-rows

列属性：grid-template-columns

一共有6种取值方式：

（1）初数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列,行高100px，列宽100px */
            grid-template-rows:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下： 

 （2）百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows:20% 30% 50%;/*三行在总高的占比分别是20% 30% 50%*/
            grid-template-columns:20% 20% 60%;/*三列在总宽的占比分别是20% 20% 60%*/
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下：

 （3）以 fr 为单位的数据（作为分配可用空间的比例系数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows:1fr 2fr 3fr;/*第一行占1/6,第二行占2/6，第三行占3/6*/
            grid-template-columns:1fr 1fr 1fr;/*第一行占1/3,第二行占1/3，第三行占1/3*/
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下：

 （4) repeat() 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows: repeat(3, 100px);/*相当于 grid-template-rows: 100px 100px 100px*/
            grid-template-columns:repeat(3,100px);/*相当于 grid-template-rows: 100px 100px 100px*/
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下：

（5）自动填充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows: repeat(3, 100px);/*相当于 grid-template-rows: 100px 100px 100px*/
            grid-template-columns:repeat(auto-fill,30%);
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下： 

 （6）minmax(min,max)函数

注意：如果条件允许，则一直使用最大值，如果条件不满足则使用中间值，如果剩下的距离不足以显示距离大小，则使用最小值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows:100px 100px minmax(100px,200px);
            grid-template-columns:repeat(auto-fill,30%);
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下： 

 （6）auto自动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows:100px auto 100px;
            grid-template-columns:auto 100px 100px;
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下：

 3.3 调整间距

  • 行间距属性：grid-row-gap
  • 列间距属性：grid-column-gap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
            grid-row-gap: 10px;
            grid-column-gap: 20px;
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

效果如下： 

  • grid-gap：第一个参数代表行间距，第二个代表列间距 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            /*开启grid布局*/
            display: grid;
            /* 设置行列 */
            /* 3行3列*/
            grid-template-rows:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
            /*间距*/
            grid-gap: 10px 20px;/*相当于grid-row-gap: 10px;grid-column-gap: 20px;*/
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div class="box"></div>
<span>这是一个span标签</span>
</body>
</html>

 3.4 grid-auto-flow元素排布

属性说明

row

默认值，先行后列，在必要时增加新行

column

先列后行，在必要时新增新列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            margin: 0 auto;
            /* 开启grid布局 */
            display: grid;
            /* 设置行列 */
            grid-template-rows:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
            grid-auto-flow: row;
        }
        .box>div {
            border: 1px dashed red;
        }
    </style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
</body>
</html>

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            margin: 0 auto;
            /* 开启grid布局 */
            display: grid;
            /* 设置行列 */
            grid-template-rows:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
            grid-auto-flow: column;
        }
        .box>div {
            border: 1px dashed red;
        }
    </style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
</body>
</html>

 效果如下：

3.5 对齐方式

3.5.1 项目位于单元格中的对齐方式

  • justify-items 属性设置单元格内容的水平位置。
  • align-items 属性设置单元格内容的垂直位置。
  • place-items 是两者的复合属性，接收两个参数，第一个是align-items，第二个是justify-items，如果只写一个参数则表示两个属性相同。
属性值说明
start

紧靠单元格起始位置（左或上），默认

end

紧靠单元格结束位置（右或下）

center

居中

stretch

拉伸，默认值，占满整个单元格

/*对齐方式*/
justify-items: start;

 效果如下：

/*对齐方式*/
justify-items: end;

 

 /*对齐方式*/
justify-items: center;

 

/*对齐方式*/
justify-items: stretch;

 

/*对齐方式*/
 align-items: start;

 

/*对齐方式*/
align-items: end;

 

/*对齐方式*/
align-items: center;

 

/*对齐方式*/
align-items: stretch;

 

/*对齐方式*/
place-items: stretch start;/*相当于 align-items: stretch;justify-items: start;*/

 3.5.2 网格位于容器中的对齐方式

  • justify-content 属性控制整个内容区域在容器里面的水平位置
  • align-content 属性控制整个内容区域的垂直位置
  • place-content 是两者的复合属性，接收两个参数，第一个是align-content，第二个是justify-content，如果只写一个参数则表示两个属性相同
属性值说明
start

紧靠起始位置（左或上）

end

紧靠结束位置（右或下）

center

居中

stretch

项目大小没有指定时，拉伸占据整个网格容器；

place-around

行或列平均分布，首尾行或列与两端的距离等于行或列间距的一半；

space-between

行或列平均分布，首尾行或列与两端没有间距；

space-evenly

行或列平均分布，首尾行或列与两端的距离等于行或列间距；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            margin: 0 auto;
            /* 开启grid布局 */
            display: grid;
            /* 设置行列 */
            grid-template-rows:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
            /* 网格位于容器中的对齐方式 */
            align-content: start;
        }
        .box>div {
            border: 1px dashed red;
        }
    </style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
</body>
</html>

 /* 网格位于容器中的对齐方式 */
align-content: end;

 

/* 网格位于容器中的对齐方式 */
 align-content: center;

 /* 网格位于容器中的对齐方式 */
align-content: stretch;

 

/* 网格位于容器中的对齐方式 */
align-content: space-around;

 

/* 网格位于容器中的对齐方式 */
 align-content: space-between;

/* 网格位于容器中的对齐方式 */
align-content: space-evenly;

 

/* 网格位于容器中的对齐方式 */
place-content: center space-between;/*相当于align-content: center;justify-content: space-between;*/

 4.grid布局中的项目属性

4.1 合并单元格

合并单元格是将划分好的网格，通过让元素使用网格线占位的形式，来达到合并的效果。

属性说明

grid-column-start

纵向网格线开始占位

grid-column-end

纵向网格线结束占位

grid-row-start

横向网格线开始占位

grid-row-end

横向网格线结束占位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            margin: 0 auto;
            /* 开启grid布局 */
            display: grid;
            /* 设置行列 */
            grid-template-rows:repeat(2,100px);
            grid-template-columns:repeat(4,100px);
            grid-gap: 10px 10px;

        }
        .box>div {
            border: 1px dashed red;
            background-color: coral;
        }
        .box1 {
            grid-column-start:1;
            grid-column-end:5
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>


</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            margin: 0 auto;
            /* 开启grid布局 */
            display: grid;
            /* 设置行列 */
            grid-template-rows:repeat(4,100px);
            grid-template-columns:repeat(4,100px);
            grid-gap: 10px 10px;

        }
        .box>div {
            border: 1px dashed red;
            background-color: coral;
        }
        .box1 {
            grid-column-start:1;
            grid-column-end:3;
            grid-row-start:1;
            grid-row-end:3;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
</body>
</html>

W星星S
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
快速上手Grid布局
weixin_55935744的博客
02-03 1138
grid布局
java中GRID_size的作用_Grid布局简介
weixin_29433715的博客
02-27 1831
Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。轻松使用 Grid 布局提高开发效率，对复杂的网页结构布局更加灵活。一、概述Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。我们比较熟悉的比如说坐标轴，坐标点；如果你看到上面这样一...
WPF GridControl 单元格合并
12-29
GridControl 单元格合并示例
2024年Web前端最全Grid布局入门，2024年最新2024年字节跳动+京东+美团面试总结
最新发布
2401_84435059的博客
05-11 799
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】.item {/* repeat 重复 *//* 声明一个容器 *//* 声明列的宽度 */*//* 声明行间距和列间距 *//* 声明行的高度 *//* auto-fill,尽可能容纳更多单元格 *//* fr表示多少等份 *//*
JavaFX.进阶操作
m0_68693300的博客
05-21 750
网格布局 将整个面板划分为若干个格子,每个格子的大小是一样的,每个格子中可以放置一个控件（布局）,类似于表格的方式。在网格布局 中放入控件的时候,还需要指定位置。 我们将要排出这个布局,也就是登陆页面的优化版本 位置原理讲解 以网格布局的思维来拆分该布局,可以分出一个 2*3 的网格 GridPane gridPane = new GridPane();我们可以给格子从上到下,从左到右依次编号,分别是： 得出结论： 位置 a,b 其中 a 向右移动需要变大,向下移动则 b 需
java：布局方法（网格布局）
小蜗牛764号的博客
04-22 6476
网格布局简单说明关键代码流程图例子说明默认情况源码运行效果其他情况 简单说明 网格布局，用常说的几行几列来理解便可，按几行几列分成多个大小统一的组件（这里选“按钮”）。一个窗体，在里边布置“按钮”用网格布局，就是把窗体里的空间分成指定的几行几列，然后“按钮”按着这些几行几列的位置有序的进行排列。附图便简单明了，如下： 其实从图像中可以看出网格布局的排列方式和流布局的排列方式有些相同之处，都是从左往右按顺序排列。只是显示方式有些相同，当我们尝试把窗体放大后这些“按钮”的位置不变的，“按钮”只是随窗体一起变大罢
CSS-Grid网格布局笔记
学习，思考，输出
07-11 1873
显示网格：是指item在定义单元格范围内，比如一行三列的布局，若item在这布局中就是显示单元格，不在则为隐式单元格。前提是容器的子元素超过了网络布局定义范围，比如一行三列的布局，正常是三个元素，但隐式单元格就是超过了三个元素。单元格列数跟随容器宽度自适应，宽度最小不会小于100px，行数是一个隐式单元格属性，会自动适应容器大小。上面没有给网格布局设置宽度与高度，以及网格的列数、行数，都是跟随元素和分辨率自动调节网格的列数、行数。默认子元素都是独占一个单元格的，如果要进行合并单元格，除了前面提到的用。
Java Web 页面布局与JS
xiaokai的博客
11-13 688
本质上是一种分治的理念。递归是一种逆向思维，递归会不停进行压栈，如果不加以限制将会把栈区压爆，所以使用递归时不要递归太多次，递归须设置终止条件，否则无法结束。
Javaweb——疫情出入信息管理系统
06-23
疫情出入信息管理系统（其他修改版本） 项目开发工具 1. IDEA 2020.1 2. Navicat Premium 15 项目开发环境 1.java version“1.8.0.... 有源代码包，数据库文件和说明文件 详细信息分布内容参考 此项目仅供学习使用
11_JavaWeb——Cookie&Session案例资源
05-01
此资源是我的博客11_JavaWeb——Cookie&Session中的案例资源，关于比较难以编写的工具类我已在博客中给出，下载此资源后可直接运行，实现登录注册功能。其中登录功能能够记住用户使得下次登录不需要重复输入用户名和...
JavaWeb——Servlet.docx
06-20
Servlet（Server Applet），全称Java Servlet，未有中文译文。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。 狭义的Servlet是指Java语言实现的一个 接口 ，广义的...
javaweb——serlvet简单登录案例.rar
11-28
javaweb——serlvet简单登录案例.rar
12_JavaWeb——Filter&Listener案例资源
05-02
此资源与我的博客12_JavaWeb——Filter&Listener中的案例对应，在11_JavaWeb——Cookie&Session案例资源基础上加上了过滤器，实现了对未登录用户的拦截，希望有所帮助。
grid合并单元格_Grid 布局
weixin_34638141的博客
01-09 1301
Grid布局Grid布局即网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的CSS布局方案，是目前唯一一种CSS二维布局Grid布局和flex布局讲到布局，我们就会想到flex布局，甚至有人认为竟然有flex布局了，似乎没有必要去了解Grid布局。但flex布局和Grid...
Java页面布局
lxy20011125的博客
05-07 5248
Java页面布局 Java布局方式
【Java】手把手教会你如何设计自适应面板，实现组件位置自动调整
qq_46686697的博客
07-23 1765
理解GUI组件自适应原理，通过Java Swing实现自适应面板
CSS合并单元格四种方式：table/display/flex/grid
热门推荐
weixin_43932309的博客
07-12 1万+
CSS合并单元格四种方式：table/display/flex/grid。
web前端：网页布局【基础布局、响应式布局、栅格布局、表格布局（table）、弹性布局（flex）、网格布局（grid）】
成长的嘻嘻哥
12-31 1271
web前端：网页布局【基础布局、响应式布局、栅格布局、表格布局（table）、弹性布局（flex）、网格布局（grid）】
Java Web简明教程–网页篇[6]–布局
程序员大阳
01-24 2604
本篇实现一个上标题栏，下版权声明，中间左侧菜单栏，中间右侧内容区域的最常用的、灰常简单的网页布局，依然是借助于CSS实现布局。 整体思路上： 1，先设计html部分，有四个区域的div，分别命名为titile、copyright、menu、content。代码如下：
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值