grid 布局

已于 2023-09-06 09:01:44 修改
阅读量1.3k 收藏 1
点赞数 1
文章标签： css3
于 2023-09-04 15:18:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu_2004/article/details/132661726
版权

grid 布局

父盒子设置

将父盒子设置成 gird 模型

display: grid;

1.1 grid-template（设置行，列宽度）

给 每列 设置宽度

grid-template-columns: 120px 120px 120px;

给列设置一定数值的宽度
在这里插入图片描述

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

fr 是 grid 布局中专用的单位，代表占所有空间的比例。
在这里插入图片描述

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

fr 是 grid 布局中专用的单位，代表占所有空间的比例。
在这里插入图片描述

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

repeat 可以更方便的设置列， 第一个参数为列数，第二个参数为 所占空间的比值。
在这里插入图片描述

grid-template-columns: 80px auto 80px;

可以给列设置宽度，然后 auto 属性可以将剩余的空间占满。
在这里插入图片描述

grid-template-columns: auto 22% 22%;

可以给列设置宽度，然后 auto 属性可以将剩余的空间占满。
在这里插入图片描述

1.2 grid-gap（设置间距）

设置行间距 和 列间距

  grid-row-gap: 30px;
  grid-column-gap: 30px;

grid-row-gap 设置行间距 grid-column-gap 设置列间距。
在这里插入图片描述

grid-gap: 10px 5px;

grid-gap 有两个参数，第一个参数代表 行间距，第二个参数代表列间距。
在这里插入图片描述

grid-gap: 10px;

grid-gap 只设置一个参数的话，那么行间距和列间距都为 10px
在这里插入图片描述

 grid-template-areas: 
 "header header header header" 
 "main main sidebar" 
 "footer footer footer footer";

grid-template-areas 给宫格布局中的每个元素设置名称
在这里插入图片描述

1.3 justify-items（横向对齐方式）

设置元素 水平 方向排版

justify-items: start;

start 属性实现从左开始排版
在这里插入图片描述

justify-items: center;

center 属性实现从中间开始排版
在这里插入图片描述

justify-items: end;

end 属性实现从右开始排版
在这里插入图片描述

1.4 align-items（纵向对齐方式）

将元素纵向对齐方式

align-items: start;

start 向上对齐
在这里插入图片描述

align-items: center;

center 居中对齐
在这里插入图片描述

align-items: end;

end 向下对齐
在这里插入图片描述

1.5 justify-content（横向对齐方式）

调整网格中网格轨道横轴方向的排布

justify-content: start;

start 左边对齐方式
在这里插入图片描述

justify-content: center;

center 居中对齐方式
在这里插入图片描述

justify-content: end;

end 右边对齐方式
在这里插入图片描述

justify-content: space-between;

space-between 两边对齐方式
在这里插入图片描述

justify-content: space-around;

space-around 两边对齐方式，两边产生边距。
在这里插入图片描述

justify-content: space-evenly;

space-evenly 两边对齐方式，两边产生边距，边距更大
在这里插入图片描述

1.6 align-content（纵向对齐方式）

调整网格中网格轨道纵轴方向的排布

align-content: start;

排列方向为 上方
在这里插入图片描述

align-content: center;

排列方向为 居中
在这里插入图片描述

align-content: end;

排列方向为 下方
在这里插入图片描述

align-content: space-between;

排列方向为 两边对齐
在这里插入图片描述

align-content: space-around;

排列方向为 两边对齐，两边产生间距。
在这里插入图片描述

align-content: space-evenly;

排列方向为 两边对齐，两边产生间距，间距更大。
在这里插入图片描述

2. 子元素设置

2.1 grid-column（设置横向填充）

设置横向的分布

.item4 {
  background-color: #f5f5ff;
  grid-column-start: 1;
  grid-column-end: 3;
}

start 设置开始位置，end设置结束位置，这个值代表网格线。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-column-start: span 3;
}

span 设置的值，就是占用多个单元格。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-column: 1/3;
}

grid-column 第一个是开始的值，第二个是结束的值。
在这里插入图片描述

2.2 grid-row（设置纵向填充）

设置纵向的分布

.item4 {
  background-color: #f5f5ff;
  grid-row-start: 1;
  grid-row-end: 3;
}

grid-row-start 设置开始的位置，grid-row-end设置结束的位置。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-row: 1/4;
}

grid-row 第一个参数开始，第二个参数为结束。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-row-start: span 2;
}

从当前位置开始，纵向占用 2 个格子。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-row: 1/span 4;
}

从第一个网格线开始，到第四个格子结束（包含）
在这里插入图片描述

2.3 grid-area（设置填充）

将元素连成面

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

第一个是横向开始的网格线，第二个是纵向开始，第三个是横向结束，第四个是纵向结束。
在这里插入图片描述

.container {
  grid-template-areas: 
  "header header header header"
   "main main main sidebar"
   "footer footer footer footer";
}
.item4 {
	grid-area: header;
}

需要配合 grid-template-areas 一起使用，给名称一样的元素填充。
在这里插入图片描述

2.4 justify-self（设置横向的对齐方式）

横向排列位置

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  justify-self: start;
}

横向设置，居左对齐。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  justify-self: center;
}

横向设置，居中对齐。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  justify-self: end;
}

横向设置，居右对齐。
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  justify-self: stretch;
}

填充
在这里插入图片描述

2.5 align-self（设置纵向的对齐方式）

纵向排列位置

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  align-self: start;
}

靠上对齐
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  align-self: center;
}

居中排列
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  align-self: end;
}

靠下对齐
在这里插入图片描述

.item4 {
  background-color: #f5f5ff;
  grid-area: 1/2/3/4;
  align-self: stretch;
}

填充
在这里插入图片描述

wyc_ok
关注
手撸一个简易 Grid 拖拽布局
weixin_45727472的博客
04-02 756
到目前为止基本上的 Grid 拖拽布局大致实现了，已经满足基本业务需求了，当然有需要朋友还可以在上面增加支持拖拉调整大小、碰撞后自动调整位置等等。
grid布局
weixin_41342195的博客
09-25 675
一、前景 CSS Grid Layout为CSS引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。本文介绍了CSS网格布局和作为CSS网格布局级别1规范一部分的新术语。 什么是网格？ 网格是一组交叉的水平和垂直线 - 一组定义列，其他行。元素可以放在网格上，尊重这些列和行。CSS网格布局具有以下功能： 固定轨道大小的网格 您可以创建具有固定轨道大小的网格 - 例如使用...
Grid布局（网格布局）
m0_57310897的博客
02-27 6264
grid网格布局、网格布局的使用、网格布局容器属性和项目属性 以及使用方法、网格布局合并单元格、
Grid 布局：从入门到精通，一篇就够了—— 探索最强大的 CSS 布局系统
最新发布
~~~
03-17 1748
CSS Grid 布局是一种强大的二维布局系统，能够轻松实现复杂的网页设计。通过定义网格容器和项目，开发者可以精确控制行和列的分布，创建灵活的响应式布局。核心属性如 grid-template-columns、grid-template-rows 和 grid-gap 用于设置列宽、行高和间距，而 grid-column、grid-row 和 grid-template-areas 则用于定位内容。无论是经典布局、响应式设计还是创意排版，Grid 布局都能以简洁的代码实现高效的设计，是网页布局的终极利器！
Grid布局详解-看这篇就够了
qq_46372132的博客
08-29 4336
Grid布局详解-看这篇就够了,比flex布局更强大的grid网格布局
Grid布局综合Demo案例
05-27
网格布局（Grid布局）是CSS3中的一个强大工具，它为网页设计提供了二维的、基于网格的布局系统，使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...
基于grid布局实现的响应式栅格系统
09-10
在本文中，我们将深入探讨如何利用CSS Grid布局来构建一个强大的响应式栅格系统，以及如何结合SCSS（Sassy CSS）进行更高效、可维护的编码。 1. CSS Grid布局基础： CSS Grid布局是CSS3中引入的一种二维布局系统，...
最强大的 CSS 布局 —— Grid 布局
热门推荐
每天都要努力学习哦~~
09-30 1万+
应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。：可以简化重复的值。布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。
5分钟教你学会 CSS Grid 布局
12-11
CSS Grid布局是现代网页设计中的一个关键工具，它允许开发者创建复杂的二维布局，而不像传统的流式布局或Flexbox那样局限于一维结构。CSS Grid在所有主流浏览器中得到了原生支持，使得它成为构建响应式和自适应界面...
grid排序
iteye_21256的博客
10-21 178
grid数据的状态更改时最好能保持原来的排序，这样保持了数据展现上的稳定性。特别的，最好不要使用可能变为空白的值的列排序。
Grid排序
qq_26880671的博客
12-29 124
<html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gbk">         <title>03.grid</title>         <link rel=&quot
Grid 布局
ciguanpeng7618的博客
06-22 183
1：基本布局 Grid 布局是二维的基于网格的布局系统，它可以同时处理列和行（这是对比flex弹性盒模型布局而言）；第一个专门为解决布局问题而生的CSS模块。 几个基本概念： Grid Container，又叫做Grid容器，就是设置了display：grid的元素。 .main{ ...
网格布局--grid
小白小白从不日别的博客
04-17 1482
CSS网格是一个用于web二维的布局系统。利用网格，可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。
Grid宫格布局
W_ang_Y_i的博客
08-29 287
// 固定数量和宽度 display: grid; grid-template-columns: 90px 100px 110px; grid-template-rows: 110px 100px 90px; // 固定数量，宽度自适应 display: grid; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); // 固定宽度，数量自适应 display: grid; .
一文搞定Grid布局
weixin_42333548的博客
01-22 1671
Grid一起快速复盘一下Grid布局。
ExtJS的grid排序
lvhao2813的博客
02-09 4728
grid的排序分为2种： 1.内存排序，根据当前已有的数据进行排序，不予后台交互 2.后台排序，将排序的字段和排序方式，以字符串的形式传递到后台，后台接受到之后对数据进行一个排序返回。 注意：这2个排序都是基于store的。什么叫基于store呢，就是表格本来没有数据，是通过store来发送请求得到数据的。数据在store中，所以可以内存排序。那么后台排序，在点击排序后是让store发送请求
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值