网格布局实现

最新推荐文章于 2023-08-07 17:41:48 发布
最新推荐文章于 2023-08-07 17:41:48 发布
阅读量202 收藏
点赞数 1
文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68430648/article/details/130421715
版权

display: grid：此内容菜鸟教程都有，仅供参考！！！

  1. 网格布局模块：提供了带有行和列得基于网格得布局系统，是网页设计变得更加容易，而无需使用浮动和定位。

  2. 浏览器支持：所有近代浏览器均支持网格属性。
  3. 网格元素：由一个父元素以及一个或多个子元素组成。

例：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果：

  1. display属性：当display属性设置位grid或者inline-grid时，就会成为网格容器
    1. display: grid

例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果：

    1. display: inline-grid

例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果

  1. grid-column-gap属性：设施列之间缝隙

例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果：

  1. grid-row-gap属性：设施行之间缝隙

例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果：

  1. grid-gap属性： grid-row-gap 和 grid-column-gap 属性的简写属性，并可设为一个值
.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}
.grid-container {
  display: grid;
  grid-gap: 50px;
}
  1. 网格行：
    1. 列之间得线称之为列线
    2. 行之间得线称之为行线

例：把网格项目放在列线1，并在列线3结束

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

效果：

例：把网格项目放在行线1，并在行线3结束

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

效果：

  1. grid-template-colums属性：定义网布局中得列数，并可定义每列得宽度
    1. 生成四列得网格
<div class="grid-container">
  <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>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

效果：

    1. 设置四列得尺寸
<div class="grid-container">
  <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>
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 30px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

效果：

  1. grid-template-row属性：定义每列得高度
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

效果：

  1. justify-content属性：用域在容器中对其整个网格

网格得总宽度必须小于容器得宽度，这样属性才能生效

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>
.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

效果：

  1. align-content属性：用于垂直对齐容器内得整个网格
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

效果：

  1. grid-column属性：定义将项目放置在那一列上，可以定义开始位置及结束位置
    1. 是 grid-column-start 和 grid-column-end 属性的简写属性

例：使item1从第一列开始并在第五列之前结束

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / 5;
}

效果：

 

例：使item从第一列开始，并跨越三列

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 4;
}

效果：

 

  1. grid-row属性：定义了将项目放置在哪一行。可以定义开始位置以及结束位置
    1. 是 grid-row-start 和 grid-row-end 属性的简写属性

例：是item1在row-line1开始，在row-line4结束

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row: 1 / 4;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

效果：

例：使item1从第一行开始并跨越2行

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row: 1 / span 2;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
  <div class="item17">17</div>
</div>

效果：

  1. grid-area属性：可用作grid-start、grif-column-start、grid-row-end和grif-column-end属性得简写属性

例：使item8从row-line和column-line2开始，在row-line5和column line6结束

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

效果：

    1. 命名属性

例：item1 的名称是 "myArea"，并跨越五列网格布局中的所有五列

.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

效果：

例：命名制作网页模板

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

效果：

  1. 网格布局容许我们将项目放置在我们喜欢得任意位置
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

效果：

  1. 通过媒体查询来重排列某些屏幕尺寸得顺序
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

效果：

大于500像素

小于500像素

前进的号角
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略
weixin_39997310的博客
06-17 1622
所有奇技淫巧都只在方寸之间。几乎从我们踏入前端开发这个领域开始，就不停地接触不同的布局技术。从常见的浮动到表格布局，再到如今大行其道的flex布局，css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物，它更加贴近网页设计师所使用的布局策略，学习并利用好它可以让我们免受很多布局困扰。虽然网格布局好处有很多，但学习起来并不简单，原因是用来设置布局的属性实在太多，其中光是作用于...
自定义容器实现网格（九宫格）布局效果
蒙的博客
12-16 2728
前言：在近期的项目开发中，需要在列表的item中实现网格布局的ui效果，考虑到列表的性能和布局嵌套的层次等因素，最后决定自己写一个支持网格布局效果的容器，直接在列表的item中使用该容器就可以支持网格（九宫格）的显示效果。避免了在列表中嵌套列表的实现方式。 下面的类FeedBaseGridView支持自定义列数、行数、不同行高的ui效果，需要实现类似效果的同学可以直接复制下面的类的代码到项目中，...
网格布局的两种实现
weixin_34032792的博客
03-17 175
网格布局常见的两种布局形式: 1.利用组合类方式:这方式将布局细化,利于扩展,但是代码结构性较差; 2.子选择器方式:这方式结构性,可读性优秀,但是xx-xx-xx的命名方式有局限行,但不失为一种不错的布局方式 css: .fl{float:left} .fr{float:right} .content{clear:both} ...
网格化布局的基本用法与实现
hly15555307663的博客
12-10 1160
网格化布局（dispaly:grid） 用来实现对网页区域划分的一种手法。在网格化水平区域称为行（row）,垂直区域称为列（column） display: grid; // 指定容器采用网格化布局，默认容器元素都是块级元素 display: inline-grid; //网格化布局，设置容器元素为行内元素 注： 设置网格化布局后，容器子元素的 float、 display: inline-block;、 display: table-cell;、 vertical-align 和 column
div css页面布局 模板_前端 CSS Grid 网格布局指南「上」
weixin_39880615的博客
11-29 222
引言CSS Grid 非常强大，它相比传统的布局方式非常灵活，允许在 Web 上创建二维布局。CSS Grid 的出现，使 Web 页面的设计更加容易，您不必再使用浮动和定位处理页面上的元素。认识 CSS GridCSS Grid 布局，译为 “网格布局” ，顾名思义，它将容器划分为 “行” 和 “列” ，行和列交叉部分形成单元格，这些单元格就是在页面上显示的主要目标。在 HTML 中实现 CSS...
RecyclerView仿应用列表实现网格布局
08-25
RecyclerView仿应用列表实现网格布局 在 Android 开发中，实现网格布局是非常常见的需求，而 RecyclerView 则是实现这种布局的不二之选。下面我们将详细介绍如何使用 RecyclerView 实现网格布局。 首先，我们需要...
基于Qt的网格布局实现下拉式窗口
最新发布
08-27
在本文中，我们将深入探讨如何使用Qt库中的网格布局（GridLayout）来实现一个下拉式窗口。Qt是一个功能强大的跨平台应用程序开发框架，它提供了丰富的图形用户界面（GUI）工具和组件，使得开发者能够轻松创建出美观...
实现网格布局
03-18
本篇文章将深入探讨如何在Android中实现网格布局，并以显示图片为例进行详细讲解。 首先，让我们了解下Android中的`GridLayout`类。`GridLayout`是Android提供的一个布局管理器，它可以自动调整子视图的位置和大小...
Qt网格布局应用.zip
06-12
在本文中，我们将深入探讨Qt框架中的网格布局（Grid ...QLineEdit作为基本的文本输入组件，结合网格布局，能有效地实现数据输入和信息收集。理解并熟练运用这些技术，将有助于提升Qt应用程序的用户体验和功能多样性。
JavaSwing GridLayout 网格布局的实现代码
08-25
JavaSwing GridLayout 网格布局的实现代码 JavaSwing GridLayout 网格布局是JavaSwing库中的一种常用布局管理器，用于在容器中排列组件。下面将详细介绍JavaSwing GridLayout 网格布局的实现代码。 首先，我们需要...
3.网格布局
weixin_51353891的博客
09-03 771
网格介绍 CSS 网格布局帮助你轻松实现复杂的 Web 设计。它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置。 CSS 网格布局是CSS中功能最强大的布局系统。它是一个二维系统，这意味着它既可以处理列又可以处理行，而 flexbox 很大程度上是一维系统。通过将CSS规则应用于父元素（成为 Grid 容器）和该元素的子元素（成为 Grid Items），使用 Grid 布局。 注意： Flexbox布局最适合应用程序的组件和小规模布局，而Grid布局则用于较大规模的布
键盘事件
weixin_30701575的博客
07-18 95
这个来讲一下键盘事件，按键事件 * 键盘事件： * onkeydown --按键被按下 * 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 * 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他都比较快 * * onkeyup -- 按键被松开 * * 键盘事件一般都会绑定给一些可以获...
div布局、table布局、flex布局、多列布局、网格布局 示例
ylnzzl的博客
04-20 3271
目录 基础代码 demo.html css/common.css div实用布局示例 代码 效果图 table布局 代码 效果图 flex布局 代码 效果图 多列布局 代码 效果图 网格布局 代码 效果图 基础代码 demo.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv.
jQuery div网格布局可拖动实现自由布局
chiai2298的博客
06-25 1254
此功能参考http://www.datouwang.com/jiaoben/761.html中的资源，感谢！ 此参数的说明参考自https://www.cnblogs.com/JealousGirl/p/useGridster.html，感谢！ 页面效果 拖动后效果 ...
css 网格布局_CSS网格布局
cumi6497的博客
08-16 261
css 网格布局 网格布局 (Grid Layout) CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is supported by all major browsers and provides a way to posit...
网格布局（Grid）
m0_59101538的博客
05-29 2040
概述 1、网格布局（Grid）是最强大的 CSS 布局方案。 2、它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 3、Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 4、Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。.
CSS Grid 网格布局教程
lucky__peng的博客
05-04 2371
一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布...
【前端 | CSS布局】 网格布局（grid）
趟过java，遇见web
08-07 1603
Grid 布局可以实现多行多列任意组合式布局，功能强大。比如圣杯布局，双飞翼布局，剧中布局，两列布局，等等......
学习笔记——网格(grid)布局
qq_41339126的博客
03-02 1769
CSS中有着一些功能强大的布局方式，它们大都操作简便，使用少量CSS代码，就可实现较为复杂的页面布局。 <div class="wrapper"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> .
用网格布局实现3列4行
06-12
可以使用网格布局的`grid-template-columns`和`grid-template-rows`属性来实现，其中`grid-template-columns`定义列的数量和宽度，`grid-template-rows`定义行的数量和高度。 ```css .container { display: grid; ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值