css【详解】grid布局—— 网格布局（栅格布局）

article/2025/9/28 3:16:56

网格布局（Grid）是最强大的 CSS 布局方案

grid布局 和 flex布局的区别

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Grid 布局的基本术语

  • 容器——采用网格布局的区域
  • 项目——容器内采用网格定位的子元素（项目只能是容器的顶层子元素，不包含项目的子元素，如下方代码的<p>元素就不是项目。Grid 布局只对项目生效。）
<div><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div>
</div>

上面代码中，最外层的<div>元素是容器，内层的三个<div>元素是项目。

网格布局的使用方法

启用网格布局 display: grid

块级容器时

display: grid;

行内容器时

display: inline-grid;

使用网格布局后，项目的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

划分列 grid-template-columns

绝对值 px

在容器内划分出3列，每列宽度为100px

grid-template-columns: 100px 100px 100px;

百分比值 %

将容器等分为3列，每列宽度为容器总宽度/3

grid-template-columns: 33.33% 33.33% 33.33%;

比例值 fr

将容器划分为2列，第1列的宽度 ：第2列的宽度 =  1:2

 grid-template-columns: 1fr 2fr;

 fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用

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

第一列的宽度为150像素，第二列的宽度是第三列的一半 

  • 如果所有fr值之和大于1，则按fr值的比例划分可自动分配尺寸。

  • 如果所有fr值之和小于1，最终的尺寸是可自动分配尺寸和fr值的乘法计算值。

和auto关键字混合使用

 fr值的可自动分配尺寸是容器尺寸减去设置auto关键字的列的fit-content尺寸。在本例中，由于设置auto关键字的这一列里面内容比较少，fit-content尺寸就是这几个字符的宽度尺寸，因此，最终的尺寸表现就是最后3列按照1:1:1的比例平分了容器尺寸减去“宽度auto”这几个字符的宽度得到的尺寸。

minmax()函数值

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

repeat()函数值

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。

grid-template-columns: repeat(3, 33.33%);

或 

grid-template-columns: repeat(2, 100px 20px 80px);

上方代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

无法确定列数时，重复次数使用关键字：auto-fill 或 auto-fit

.container {grid-template-columns: repeat(auto-fill, 100px);
}
.container {grid-template-columns: repeat(auto-fit, 100px);
}

 关键字往往会和其他网格布局函数一起使用，例如minmax()函数

.container {grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

这就实现了无论grid容器多宽，grid子项都会等比例充满grid容器（因为设置了1fr），同时保证宽度不小于100px，网格布局的列数自动计算分配的智能弹性布局效果。

使用auto-fill关键字自动填充的时候，repeat()函数不能和auto一起使用的，但可以与长度值和百分比值一起使用。

.container {/* 有效 -- 每一行的最后一列的宽度都会是容器的20%大小 */grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))20%;
}

使用auto-fit关键字实现的布局效果要比auto-fill关键字实现的更符合常规的布局需求，效果见

repeat()函数auto-fit关键字效果 » CSS新世界demo演示

fit-content()函数

让尺寸适应于内容，但不超过设定的尺寸，常用于希望grid子项的宽度随着内容变化，但是又不希望宽度太大的场景。

.container {display: grid;grid-template-columns: fit-content(100px) fit-content(100px) 40px auto;
}

fit-content()函数只支持数值和百分比值，fr值是不合法的。

min-content

最小内容尺寸中最大的那个最小内容尺寸值。网格布局中的同一行grid子项的高度和同一列grid子项的宽度都是一致的，因此min-content指的并不是某一个格子的最小内容尺寸，而是一排或者一列格子中所有最小内容尺寸中最大的那个最小内容尺寸值。

max-content

max-content关键字和min-content关键字类似，只是最终的尺寸是最大内容宽度中最大的那一个值。

auto

由浏览器自己决定长度

尺寸的上限是最大内容尺寸的最大值，但是不同于max-content关键字，max-content关键字的尺寸是固定的，这里的尺寸是会受到justify-content属性和align-content属性影响的。计算规则有些复杂，了解即可。

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

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

划分行 grid-template-rows

 使用方法与列相同

grid-template-rows: 100px 100px 100px;
或
grid-template-rows: 33.33% 33.33% 33.33%;

范例

.container {grid-template-columns: 80px auto 100px;grid-template-rows: 25% 100px auto 60px;
}

 

自动填充 auto-fill

单元格大小固定，但容器大小不确定时，如果希望每一行（或每一列）容纳尽可能多的单元格，可以使用auto-fill关键字进行自动填充。

grid-template-columns: repeat(auto-fill, 100px);

每列宽度100px，然后自动填充，直到容器不能放置更多的列。

给网格线命名 []

在grid-template-columns属性和grid-template-rows属性中，使用方括号指定每一根网格线的名字，方便以后的引用。

.container {display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

由于网格的中间区域的网格线是由两边格子公用的，因此，可以给网格线起两个名称（使用空格分隔），分别表示网格线的两侧。

.container {grid-template-columns: [广告区-左] 120px [广告区-右 内容区-左] 600px [内容区-右];
}

设置行/列的间距

设置行间距 row-gap

row-gap: 20px;

支持数值和百分比值

设置列间距 column-gap

column-gap: 30px;

支持数值和百分比值

gap

是column-gap和row-gap合并的简写形式

gap: 20px 30px;

如果gap省略了第二个值，浏览器认为第二个值等于第一个值。

支持数值和百分比值和calc()函数

 指定区域 grid-template-areas

可以将网格布局中的某个单元格或多个单元格定义为一个区域

网格区域一定要形成规整的矩形区域，无论是L形，还是凹的或凸的形状都会认为是无效的属性值。

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c''d e f''g h i';
}

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

实战范例见  grid-template-areas与土地区域划分 » CSS新世界demo演示

不属于任何区域的单元格，用.表示

grid-template-areas: 'a . c''d . f''g . i';

多个单元格合并成一个区域

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

上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

改变网格布局的布局顺序 grid-auto-flow

  • row 【默认值】—— "先行后列"
  • column —— "先列后行"。 使用范例见 grid-auto-flow:column与垂直排列优先布局 » CSS新世界demo演示
  • row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
  • column dense，表示"先列后行"，并且尽可能紧密填满，尽量不出现空格。

默认的grid-auto-flow: row效果是

修改设置，设为row dense后

如果将设置改为column dense，表示"先列后行"，并且尽量填满空格，则效果如下

dense

表示网格的自然排列启用“密集”打包算法，也就是说，如果稍后出现的网格比较小，则尝试看看其前面有没有合适的地方放置该网格，使网格尽可能排列紧凑。 

举个通俗的例子，村里9户人家，每一户都分得了一块田地，大家的田地都是紧密相连的。孤寡老人李大爷和王大爷相继去世，于是就有两块田地是空的，因为有空缺，所以这个时候，如果我们使用无人机从田地上方拍一个照片，就会看到照片中的田地是稀疏的，不是紧密的。这个时候，村里又来了两户新人家，也要分田地。如果使用dense属性值，则优先分配之前李大爷和王大爷留下的空缺的土地，因为这样会让整片田地没有空缺，让田地是“密集的”（“紧密的”）。

范例：

 

设置单元格内的对齐方式

 justify-items

指定单元格内容的水平对齐方式，属性值有：

  • stretch：【默认值】拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。

align-items

指定单元格内容的垂直对齐方式，属性值有：

  • normal：【默认值】会根据使用场景的不同表现为stretch或者start。
  • stretch：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • baseline：基线对齐（align-items属性特有属性值）

效果见 justify-items/align-items属性值样式表现 » CSS新世界demo演示

在绝大多数场景下normal的表现和stretch的表现是一模一样的，但是如果grid子项是具有内在尺寸或具有内在比例的元素，则此时normal的表现类似于start属性值的表现。最典型的具有内在尺寸和比例的元素就是img图片元素。

 grid子项是两个替换元素，一个替换元素是图片，具有内在的尺寸和比例；另一个替换元素是按钮，没有内在尺寸和比例。结果垂直方向的对齐表现如图6-111所示，图片的表现与start的表现一样，位置居顶且没有拉伸，而按钮的表现与stretch的表现一样，在垂直方向上完全被拉伸了。

对比效果见 align-items默认值图片和按钮的样式表现 » CSS新世界demo演示

place-items

是align-items属性和justify-items属性的合并简写形式。

place-items: start end;

 如果省略第二个值，则浏览器认为与第一个值相等。

IE浏览器和Edge浏览器都不支持place-items属性。如果不考虑浏览器的兼容性，在CSS中实现垂直居中对齐效果的最佳方法就是使用place-items属性：

.container {display: grid;place-items: center;
}

justify-self

跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self

跟align-items属性的用法完全一致，也是只作用于单个项目。

place-self

是align-self属性和justify-self属性的合并简写形式。

place-self: center center;

如果省略第二个值，place-self属性会认为这两个值相等。

.item-1  {justify-self: start;
}

设置容器内的对齐方式

justify-content

是整个内容区域在容器里面的水平位置（左中右）

align-content

是整个内容区域的垂直位置（上中下）。

要想justify-content属性和align-content属性起作用，就需要让grid子项的总尺寸小于grid容器的尺寸。要么给gird子项设置较小的具体的尺寸值，要么让gird子项的尺寸是auto，同时保证内容尺寸较小。

都可以取下面这些值：

  • normal【默认值】效果和stretch一样
  • start - 对齐容器的起始边框。
  • end - 对齐容器的结束边框。
  • center - 容器内部居中。
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器。
  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

效果见 justify-content/align-content属性值样式表现 » CSS新世界demo演示

place-content

是align-content属性和justify-content属性的合并简写形式。

place-content: space-around space-evenly;

如果省略第二个值，浏览器就会假定第二个值等于第一个值。

指定项目的位置

通过指定项目的四个边框分别定位在哪根网格线，来指定项目的位置

  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线

属性值可以是负整数，但是不能是0，负整数表示从右侧开始计数网格线。

.container {display: grid;grid: auto / repeat(6, 1fr);
}
.item {grid-column-start: -3;grid-column-end: 2;/* 设置背景色 */background: deepskyblue;
}

属性值还可以指定为网格线的名字

.item-1 {grid-column-start: header-start;grid-column-end: header-end;
}

 名称还有一个自动补全-start后缀和-end后缀的特性

.container {display: grid;grid-template-columns: [A-start] 100px [A-end B-start] auto [B-end] auto;
}.item {grid-column-start: A;grid-column-end: B;/* 设置背景颜色 */background: deepskyblue;
}

.container {display: grid;grid-template-columns: [A] 80px [B] auto [C] 100px [D];
}
.item {grid-column-start: B 4;grid-column-end: C;/* 设置背景颜色 */background: deepskyblue;
}

span

表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

span后的数字不能是负值，也不能是0，也不能是小数。

.item-1 {grid-column-start: span 2;
}

 1号项目的左边框距离右边框跨越2个网格。

grid-column-end设置span不会产生任何效果

<div class="container"><div class="item-b"></div>
</div>
.item-b {grid-column-start: 2;grid-column-end: span 纵线3;grid-row-start: 第一行开始;grid-row-end: span 3;
}

 

 如果网格布局中有多个网格线的命名是B或者是B-start

.container {display: grid;grid-template-columns: [B] 80px [B] auto [B] 100px [D] auto auto;
}

则spanB表示离grid-column-end位置最近的一个网格线B，而如果属性值是B而不是spanB，则起始位置会是离grid-column-end位置最远的一个网格线B。

 效果见 span和不同数量网格线命名效果 » CSS新世界demo演示

如果网格布局中没有网格线的命名是B或者B-start

.container {display: grid;grid-template-columns: [A] 80px [C] auto [C] 100px [D] auto auto;
}
.item {grid-column-start: span B;grid-column-end: 4;
}

如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序

  • grid-column属性是grid-column-start和grid-column-end的合并简写形式
  • grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

斜杠以及后面的部分可以省略，默认跨越一个网格。

.item-1 {grid-column: 1 / 3;grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;
}

项目item-1占据第一行，从第一根列线到第三根列线。

也可以使用span关键字，表示跨越多少个网格。

.item-1 {background: #b03532;grid-column: 1 / 3;grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {background: #b03532;grid-column: 1 / span 2;grid-row: 1 / span 2;
}

项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。

其他效果范例如下： 

.item-1 {grid-column-start: 2;grid-column-end: 4;
}

1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

.item-1 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4;
}

指定项目的区域

.item-1 {grid-area: e;
}

 1号项目位于e区域

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
.container {grid: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
}
.item {grid-area: 1 / 2 / 3 / 4;
}

 

.item {
grid-area: 4 A / span 4 / B / D;/* 等同于 */grid-row-start: 4 A;
grid-column-start: span 4;
grid-row-end: B;
grid-column-end: D;
}
.item {
grid-area: A / B / C;/* 等同于 */grid-area: A / B / C / B;
}
.item {
grid-area: 1 / 2 / 3;/* 等同于 */grid-area: 1 / 2 / 3 / auto;
}
.item {
grid-area: A / B;/* 等同于 */grid-area: A / B / A / B;
}
.item {
grid-area: 1 / 2;/* 等同于 */
grid-area: 1 / 2 / auto / auto;
}
.item {
grid-area: A;/* 等同于 */
grid-area: A / A / A / A;
}
.item {
grid-area: 2;/* 等同于 */
grid-area: 2 / auto / auto / auto;
}

 css中grid网格布局的经典应用——图文层叠_朝阳39的博客-CSDN博客

设置自动生成的行和列

  • “隐式网格” —— 是非正常网格，其在grid子项多于设置的单元格数量，或grid子项的位置出现在设定的网格范围之外时出现
  • “显式网格” —— 在规定容器内显示的网格

grid-auto-columns属性和grid-auto-rows属性用来设置“隐式网格” 的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

默认值是auto，可以是长度值、百分比值和fr值，也可以是min-content关键字和max-content关键字，也支持mimmax()函数和fit-content()函数，但是不支持repeat()函数。

划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-auto-rows: 50px; 
}

上面代码指定新增的行高统一为50px（原始的行高为100px）。

其他合并简写属性

从易读易写的角度考虑，建议不要合并属性，所以了解即可，方便读懂别人的代码

grid-template

是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

.container {grid-template: 25% 100px auto 60px / 80px auto 100px;
}
.container { grid-template: none; }

 属性值none表示将3个CSS属性都设置为初始值none。

.container {grid-template: "葡萄 葡萄 葡萄" 1fr "龙虾 养鱼 养鱼" 1fr "龙虾 养鱼 养鱼" 1fr "西瓜 西瓜 西瓜" 1fr/ 1fr 1fr 1fr;
}

网格线名称总是出现在网格尺寸和区域名称的两侧

.container {grid-template: [row-name1-start] "葡萄 葡萄 葡萄" 1fr [row-name1-end row-name2-start]"龙虾 养鱼 养鱼" 1fr [row-name2-end]"龙虾 养鱼 养鱼" 1fr [row-name3-end][row-name4-start] "西瓜 西瓜 西瓜" 1fr [row-name4-end]/ [col-name-start] 1fr [col-name-end] auto;
}

 [col-name1-end]和[col-name2-start]必须放在同一个中括号里面，否则就是不合法的。但是，在包含区域名称的grid-template缩写语法中，[col-name1-end][col-name2-start]既可以放在一个中括号中，也可以分开放在两个中括号中。

.container {grid-template: "a" 1fr [name1-end name2-start]"b";
}
.container {grid-template: "a" 1fr [name1-end][name2-start] "b";
}

包含区域名称的grid-template缩写属性不支持repeat()函数

grid

是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

.container {grid: 25% 100px auto 60px / 80px auto 100px;
}
/* none表示设置所有子属性为初始值  */
grid: none
.container {grid: 100px 300px / 3fr 1fr;
}/*  等同于  */.container {grid-template-rows: 100px 300px;grid-template-columns: 3fr 1fr;
}
.container {grid: 100px 300px / auto-flow 200px;
}/*  auto-flow 在斜杠左边时解析为row，在斜杠右边时解析为 column */
/*  所以上方代码等同于 */.container {grid-template-rows: 100px 300px;grid-auto-flow: column;grid-auto-columns: 200px;
}


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

相关文章

微信小程序布局技巧（一）

微信小程序布局技巧（一）

微信小程序布局技巧&#xff08;一&#xff09; 前言小程序布局方式Block布局方式flex布局方式wxss添加样式wxml应用样式效果 flex布局种类justify-content属性align-items属性flex-wrap 属性 应用尾巴 前言 友情提示&#xff0c;阅读本文之前&#xff0c;可能需要有一点微信小…
阅读更多...
微信小程序中通过flex实现网格布局(一)

微信小程序中通过flex实现网格布局(一)

这篇文章主要是通过flex布局实现网格布局。 准备知识&#xff1a; 数组的undefined的问题 一般来说&#xff0c;网格布局是特殊的列表&#xff0c;后台返回的数据是一维数组。而我们通常使用wx:for的方式将数据填充进去。数据格式如下&#xff1a; let dataList [a,b,c,d]d…
阅读更多...
网格布局，实现网页图片不规则排版

网格布局，实现网页图片不规则排版

1、网格布局的含义&#xff0c;及与弹性盒布局的区别 含义&#xff1a;它将网页划分成一个个网格&#xff0c;可以任意组合不同的网格&#xff0c;做出各式各样的布局&#xff1b; 区别&#xff1a;Grid布局与Flex布局有一定的相似性&#xff0c;都可以指定容器内部多个项目的…
阅读更多...
6、微信小程序的布局

6、微信小程序的布局

文章目录 前言一、传统基本布局1.盒子模型2.显示方式Display3.定位position4.溢出属性Overflow5.浮动Float6.对齐 二、Flex弹性布局1.基本属性2.使用示例 前言 wxss 指的是 Wei Xin Style Sheet&#xff0c;微信团队定义的一套用以实现小程序布局样式的层叠样式表&#xff0c;…
阅读更多...
微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局

微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局

微信小程序居中、居右、横纵布局 1、水平垂直居中&#xff08;相对父类控件&#xff09;方式一&#xff1a;水平垂直居中 父类控件&#xff1a; display: flex;align-items: center;//子控件垂直居中justify-content: center;//子控件水平居中width: 100%;height: 400px //注意…
阅读更多...
微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局

微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局

微信小程序居中、居右、横纵布局 1、水平垂直居中&#xff08;相对父类控件&#xff09; 方式一&#xff1a;水平垂直居中 父类控件&#xff1a; display: flex;align-items: center;//子控件垂直居中justify-content: center;//子控件水平居中width: 100%;height: 400px//注…
阅读更多...
小程序中的网格布局

小程序中的网格布局

在日常小程序开发中，第一个遇到的问题是页面布局的问题。设计师给的设计稿通常是一个静态的图片，我们要把图片转换成实际可以使用的布局。在电商场景中，我们经常会看到商品的两列布局，通常在CSS中，两列布局可以使用网格布局的方案解决。我们本篇就讲解一下CSS的网格布局，…
阅读更多...
微信小程序: 使用grid进行网格布局

微信小程序: 使用grid进行网格布局

grid与flex一样用于页面布局。flex用于一维布局&#xff0c;grid用于二维布局。所以有时候一些网格状的布局相对于grid来说会更加方便。 注意&#xff0c;设为网格布局以后&#xff0c;容器子元素&#xff08;项目&#xff09;的float、display: inline-block、display: table-…
阅读更多...
Spug - 轻量级自动化运维平台

Spug - 轻量级自动化运维平台

Spug - 轻量级自动化运维平台 对于中小型企业而言&#xff0c;进行主机和应用的管理是比较麻烦的&#xff0c;应用部署往往需要直接连接服务器&#xff0c;再进行手动的环境配置、代码拉取、应用构建和部署发布等工作&#xff0c;容易出错&#xff0c;且耗时费力。一个好的自动…
阅读更多...
网络自动化运维（NetDevOps）创作者推荐

网络自动化运维（NetDevOps）创作者推荐

前言&#xff1a; 随着NetDevOps技术登上了历史舞台&#xff0c;越来越多的从业者开始利用NetDevOps简化网络的运维&#xff0c;并进行了技术分享&#xff0c;将蛋糕越做越大。在这里&#xff0c;仅代表个人对这些无私奉献的网络、运维工程师们表达由衷的敬意。 此外&#xff…
阅读更多...
开源自动化运维平台Spug

开源自动化运维平台Spug

开源自动化运维平台Spug Spug演示环境特性安装Docker安装安装步骤1. 安装docker2. 拉取镜像3. 启动容器4. 初始化5. 访问测试6. 版本升级 Spug Spug是面向中小型企业设计的轻量级无Agent的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、应用发布部署…
阅读更多...
自动化运维工具

自动化运维工具

自动化运维 通过运维工具或平台&#xff0c;实现IT基础设施及业务应用日常任务处理和运维流程的自动化&#xff0c;从而提高效率和降低风险&#xff0c;促进运维组织的成熟和各种能力的升级。 自动化运维工具 部署类&#xff1a;jenkins 环境类&#xff1a;ansible/saltStac…
阅读更多...
关于自动化运维的那些事儿

关于自动化运维的那些事儿

随着近年全球运维大会的火热举办&#xff0c;自动化运维话题被推向了前所未有地热度。自动化运维并不是炒作的概念&#xff0c;而是随着信息技术发展的必要趋势。“大数据”“容器”“DevOps”“微服务”……&#xff0c;不断涌现出新的技术&#xff0c;而它们都有共同的特点&a…
阅读更多...
部署自动化运维工具rundeck

部署自动化运维工具rundeck

简单介绍&#xff1a; RunDeck 是用 Java/Grails 写的开源工具&#xff0c;帮助用户在数据中心或者云环境中自动化各种操作和流程。通过命令行或者 web 界面&#xff0c;用户可以对任意数量的服务器进行操作&#xff0c;大大降低了对服务器自动化的门槛。 官网地址&#xff1a…
阅读更多...
python自动化运维学习

python自动化运维学习

1.python能做什么&#xff1f; 2.解释型与编译型语言的区别&#xff1f; 3.动态型与静态型语言的区别&#xff1f; 4.ASCLL Unicode GBK UTF-8之间的联系 ASCLL码是最初被创建出来表示字符的&#xff0c;总共255个。每个占1字节---》字符不够用---》单独的中文编码GBK&#xff…
阅读更多...
一站式自动化运维及自动化部署平台

一站式自动化运维及自动化部署平台

真正的大师,永远都怀着一颗学徒的心&#xff01; 一、项目简介 一站式自动化运维及自动化部署平台 二、实现功能 支持机器管理&#xff08;环境变量、机器秘钥、终端日志、终端会话、机器代理&#xff09; 支持调度任务 支持执行管理 支持应用管理 支持构建发布 支持用户…
阅读更多...
IT运维之自动化运维

IT运维之自动化运维

大家好&#xff0c;我是技福的小咖老师。 今天咱们来简单讲讲自动化运维的话题。 现在随着IT运维管理工作的复杂度和难度的大大增加&#xff0c;过去仅靠几个专门的运维人员或是“技术大拿”来包打天下已经行不通了&#xff0c;企业开始需要运用专业化、标准化和流程化的手段来…
阅读更多...
自动化运维与普通运维有什么区别？

自动化运维与普通运维有什么区别？

本文首发于知乎&#xff0c;由嘉为蓝鲸原创。 商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 01. 何为自动化运维&普通运维&#xff1f; 在了解两者的区别前&#xff0c;我们得先明确对二者的定义&#xff0c;总的来说运维工作的目的都是为了保障企业业…
阅读更多...
自动化运维平台Spug介绍

自动化运维平台Spug介绍

一、概要 Spug是一款使用PythonFlaskVueElement组件开发的开源运维管理系统,系统前后端分离&#xff0c;项目创建于2017年&#xff0c;2018 年 2 月第一个开源运维平台版本发布&#xff0c;设计为面向中小型企业设计的轻量级无Agent的自动化运维平台&#xff0c;UI基于Ant Desi…
阅读更多...
Django 实现自动化运维后台

Django 实现自动化运维后台

layui 框架与BootCSS框架相似都属于前端美化框架&#xff0c;区别在于BootCSS更加专业&#xff0c;而LayUI则更多的是面向于后端开发者&#xff0c;所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式&#xff0c;却又并非受限于 CommonJS 的那些条条框框…
阅读更多...
推荐文章

Copyright @ 2022~2023