grid 布局

原创 已于 2023-09-06 09:01:44 修改 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

于 2023-09-04 15:18:13 首次发布

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
关注
CSS Grid布局中的间隙(gap)属性：灵活间距控制
weixin_41455464的博客
06-29 312
总而言之，
grid布局
weixin_41342195的博客
09-25 699
一、前景 CSS Grid Layout为CSS引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。本文介绍了CSS网格布局和作为CSS网格布局级别1规范一部分的新术语。 什么是网格？ 网格是一组交叉的水平和垂直线 - 一组定义列，其他行。元素可以放在网格上，尊重这些列和行。CSS网格布局具有以下功能： 固定轨道大小的网格 您可以创建具有固定轨道大小的网格 - 例如使用...
手撸一个简易 Grid 拖拽布局
weixin_45727472的博客
04-02 824
到目前为止基本上的 Grid 拖拽布局大致实现了，已经满足基本业务需求了，当然有需要朋友还可以在上面增加支持拖拉调整大小、碰撞后自动调整位置等等。
Grid布局（网格布局）
m0_57310897的博客
02-27 6427
grid网格布局、网格布局的使用、网格布局容器属性和项目属性 以及使用方法、网格布局合并单元格、
Grid布局详解-看这篇就够了
qq_46372132的博客
08-29 4572
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 布局，如居中，两列布局，三列布局等等是很容易实现的。：可以简化重复的值。布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。
grid排序
iteye_21256的博客
10-21 184
grid数据的状态更改时最好能保持原来的排序，这样保持了数据展现上的稳定性。特别的，最好不要使用可能变为空白的值的列排序。
Grid排序
qq_26880671的博客
12-29 129
<html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gbk">         <title>03.grid</title>         <link rel=&quot
Grid 布局
ciguanpeng7618的博客
06-22 188
1：基本布局 Grid 布局是二维的基于网格的布局系统，它可以同时处理列和行（这是对比flex弹性盒模型布局而言）；第一个专门为解决布局问题而生的CSS模块。 几个基本概念： Grid Container，又叫做Grid容器，就是设置了display：grid的元素。 .main{ ...
网格布局--grid
小白小白从不日别的博客
04-17 1510
CSS网格是一个用于web二维的布局系统。利用网格，可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。
Grid宫格布局
W_ang_Y_i的博客
08-29 339
// 固定数量和宽度 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 1953
Grid一起快速复盘一下Grid布局。
ExtJS的grid排序
lvhao2813的博客
02-09 4753
grid的排序分为2种： 1.内存排序，根据当前已有的数据进行排序，不予后台交互 2.后台排序，将排序的字段和排序方式，以字符串的形式传递到后台，后台接受到之后对数据进行一个排序返回。 注意：这2个排序都是基于store的。什么叫基于store呢，就是表格本来没有数据，是通过store来发送请求得到数据的。数据在store中，所以可以内存排序。那么后台排序，在点击排序后是让store发送请求
博客 css grid grid-row
最新发布
02-14
### CSS Grid `grid-row` 属性详解 #### 定义与功能 `grid-row` 是用于定义网格项在行方向上的位置和大小的简写属性。该属性可以控制网格项占据哪几行以及跨越多少行。具体来说，此属性是 `grid-row-start` 和 `grid-row-end` 的组合[^1]。 #### 使用方法 当应用到某个 HTML 元素上时，可以通过设置 `grid-row` 来决定这个元素在其父级网格容器内的起始行线 (`start`) 及结束行线 (`end`) 或者直接指定它要跨过的行列数(`span`)。 - **数值型参数**: 表示具体的栅格线条编号； - **关键字 span 加 数字/名称**: 表达的是跨越的数量或者是从当前定位点开始直到遇到同名区域为止； #### 实际案例展示 下面是一个简单的例子来说明如何利用 `grid-row` 进行布局： 假设有一个包含三个子元素 `.item-a`,`.item-b`,` .item-c` 的网格容器，并希望按照特定的方式排列它们的位置： ```html <div class="wrapper"> <div class="item item-a">A</div> <div class="item item-b">B</div> <div class="item item-c">C</div> </div> ``` 对应的 CSS 如下所示: ```css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item-a { background-color: lightblue; grid-row: 1 / 3; /* 跨越第1至第2条水平线 */ } .item-b { background-color: pink; grid-row: 2 / 4; /* 跨越第2至第3条水平线 */ } .item-c { background-color: lightgreen; grid-row: 3 / 5; /* 跨越第3至第4条水平线 */ } ``` 在这个实例里，每个项目都指定了自己的 `grid-row` 值，从而实现了不同的高度覆盖效果。注意这里使用了分数形式 `/` 将起点和终点分隔开来表示范围。 另外一种常见的用法就是采用 `span` 关键词加上相应的整数来简化书写方式： ```css .item-d { grid-row: 1 / span 2; /* 从第一条线开始向下扩展两行 */ } ``` 以上便是关于 `grid-row` 属性的基础介绍及其实际应用场景的例子。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值