Css-Grid布局(强大)

最新推荐文章于 2024-09-30 15:56:28 发布
最新推荐文章于 2024-09-30 15:56:28 发布
阅读量2.9k 收藏 11
点赞数 3
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57404736/article/details/128267626
版权

前言

我们前面讲的Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看做是一维布局，Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看做是二维布局，Grid布局远比Flex布局强大

grid布局像一个个子一个格子的排列，更加灵活，更加强大。

在这里插入图片描述

常用布局方式

  1. 传统布局方式
    1. 利用position属性+display属性+float属性布局，兼容性最好，但是效率低，麻烦
  2. flex布局
    1. 有自己的一套属性，效率高，学习成本低，兼容性强
  3. grid布局
    1. 网格布局(Grid)是最强大的css布局方案。但是知识点较多，学习成本相对困难，目前的兼容性不如flex好

基本概念图

在这里插入图片描述

每个grid布局，有隐藏的网格线，用来帮助定位的

在这里插入图片描述

准备

准备一个大div，里面包裹住10个div，然后给每个div的内容设置不同的数字和背景色，方便标识

<template>
  <div id="app">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
    <div class="d7">7</div>
    <div class="d8">8</div>
    <div class="d9">9</div>
    <div class="d10">10</div>
  </div>
</template>

<style type="text/css" lang="scss">
  #app{
    margin-left: 10vw;
    margin-top: 10vh;
    color: white;
    font-size: 18px;
    font-weight: 600;
    width: 400px;
    height: 600px;
    border: 5px solid skyblue;
  }
  #app{

  }
  .d1{
    background-color: #fff799;
  }
  .d2{
    background-color: #80a492;
  }
  .d3{
    background-color: #422517;
  }
  .d4{
    background-color: #c12c1f;
  }
  .d5{
    background-color: #a76283;
  }
  .d6{
    background-color: #6b5458;
  }
  .d7{
    background-color: #4f6f46;
  }
  .d8{
    background-color: #C67915;
  }
  .d9{
    background-color: #2C2F3B;
  }
  .d10{
    background-color: #a3bbdb;
  }
</style>

容器属性

和flex布局一样，拥有容器和项目的概念

在这里插入图片描述

容器共有15个属性：

1、grid-tamplate-columns

常和grid-template-rows一起使用，想要多少行和列，就填写相应属性值的个数，不填写，自动分配

比如我想设置前三行和前四列的宽高为100px

在这里插入图片描述

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
}

在这里插入图片描述

2、grid-template-rows

一般和上个属性搭配使用，上面演示了。。。

grid-template-* 值写法

  1. repeat()：第一个参数是重复的次数，第二个参数是所要重复的值
#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: repeat(3,100px); /* 效果和上面一样 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(4,100px); /* 效果和上面一样 */
}
  1. auto-fill：有时，单元格的大小时固定的，但是容器的大小不确定，这个属性就会自动填充
#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: repeat(auto-fill,100px); /* 内容自动把容器的宽度填满 项目自身宽度依旧保持100px */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(3,100px);
}

在这里插入图片描述

  1. fr：为了方便表示比例关系，网格布局提供了fr关键字(fraction的缩写，意为：片段)
#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: repeat(5,1fr); /* 宽度平均分成5份 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(3,100px);
}

在这里插入图片描述

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

演示需要先把容器的宽高去掉

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: 1fr minmax(150px, 1fr); /* 第二列最少不能低于150px */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(3,100px);
}

在这里插入图片描述

  1. auto：表示由浏览器自己决定长度
#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: 100px auto 100px;/* 第一列和第三列占100px，中间剩余的空间给第二列 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(4,100px);
}

在这里插入图片描述

  1. 网格线，可以用方括号定义网格线名称，方便以后的引用

在这里插入图片描述

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(4,100px);
}

3、grid-row-gap

项目之间的行间距,一般和grid-column-gap一起使用

比如想要设置每个项目之间的间距为10px

#app{
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    grid-column-gap: 10px; /* 项目之间的列间距 */
    grid-row-gap: 10px; /* 项目之间的行间距 */
}

在这里插入图片描述

4、grid-column-gap

项目之间的列间距，一般和上面一起使用，上面一起演示了

5、grid-gap

上面两个间距的合并的写法，如果行列间距值一样，可以只写一个

#app{
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    /* grid-column-gap: 10px;
    grid-row-gap: 10px; */
    /* grid-gap: 10px 10px; */
    grid-gap: 10px; /* 如果值一样，可以只写一个 */
}

在这里插入图片描述

grid-*-gap扩展

根据最新标准，上面三个属性名的grid-前缀已经删除

#app{
    display: grid;
    /* grid-template-columns: 1fr 2fr 3fr; 第一列占1份，第二列占2份，第三列占3份 */
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    /* column-gap: 10px;
    row-gap: 10px; */
    /* gap: 10px 10px; */
    gap: 10px; /* 如果值一样，可以只写一个 */
}

6、grid-template-areas

一个区域由单个或多个单元格组成，由你决定具体使用，需要在项目属性里面设置

在这里插入图片描述

#app{
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    /* grid-template-areas: 'a b c'
    						'd e f'
    						'g h i'; */
    /* grid-template-areas: 'a a a'
    						'd b b'
    						'c c c'; */
    grid-template-areas: 'a . c'
        				 'd . d'
        				 'e . f';
}

7、grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”即先填满第一行，再开始放入第二行(就是子元素的排放顺序)

默认是grid-auto-flow: row;

#app{
    display: grid;
    grid-template-columns: [c1] 100px [c2] auto [c3] 100px;
    grid-template-rows: repeat(4,100px);
    grid-auto-flow: column; /* 主方向为列 */
}

在这里插入图片描述

grid-auto-flow扩展

  • grid-auto-flow: row;

    在这里插入图片描述

  • grid-auto-flow: row danse;可以合理利用空间

    在这里插入图片描述

**注意：**拥有以上效果，需要先给.d1 和 .d2元素单独设置grid-column: 1 / 3;属性，表示占表格列的第一条线开始，到第三条线结束的距离，后面讲项目的时候会讲到

8、justify-items

设置单元格内容的水平和垂直的对齐方式(水平方向)，有四个值

  • start：开头
  • end：尾部
  • center：中间
  • stretch

需要给项目里面内容单独设置宽度才能看出来

8.1、start
#app{
    display: grid;
    /* 外面格子宽度 */
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-items: start;
    /* 里面内容宽度 */
    &>div{
        width: 50px; /* 重要设置*/
        height: 100%; /* 重要设置*/
    }
}

在这里插入图片描述

8.1、end
#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-items: end;
    &>div{
        width: 50px; /* 重要设置*/
        height: 100%; /* 重要设置*/
    }
}

在这里插入图片描述

8.1、center
#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-items: center;
    &>div{
        width: 50px; /* 重要设置*/
        height: 100%; /* 重要设置*/
    }
}

在这里插入图片描述

9、align-items

设置单元格内容的水平和垂直的对齐方式(水平方向)，有四个值

  • start：开头
  • end：尾部
  • center：中间
  • stretch

需要给项目里面内容单独设置宽度才能看出来，这里只演示一个了

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    align-items: end;
    &>div{
        width: 100%; /* 重要设置*/
        height: 50px; /* 重要设置*/
    }
}

在这里插入图片描述

10、place-items

上面两个属性的简写，如果值一样，可以只写一个

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    /*
        相当于
        justify-items: center;
        align-items: center;
    */
    place-items: center;
    &>div{
        width: 50px; /* 重要设置*/
        height: 50px; /* 重要设置*/
    }
}

在这里插入图片描述

11、justify-content

设置整个内容区域的水平对齐方式，共有7个值：

  • start：行首
  • end：行尾
  • center：行中间
  • stretch
  • space-around：和flex布局的效果一样，均匀排列每个元素，首个元素放置于起点，末尾元素放置于重点
  • space-betweeen：和flex布局的效果一样，均匀排列每个元素，每个元素周围分配相同的空间
  • space-evenly：均匀排列每个元素，每个元素之间的建个相等
11.1、start
#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-content: start;
}

在这里插入图片描述

11.2、end
justify-content: end;

在这里插入图片描述

11.3、center
justify-content: center;

在这里插入图片描述

11.4、space-around
justify-content: space-around;

在这里插入图片描述

11.5、space-between
justify-content: space-between;

在这里插入图片描述

11.6、space-evenly
justify-content: space-evenly;

在这里插入图片描述

12、align-content

设置整个内容区域的垂直对齐方式,和上面一样，拥有七个值，这里就不再一一列举了，举两个例子

12.1、end
align-content: end;

在这里插入图片描述

12.2、space-around
align-content: space-around;

在这里插入图片描述

13、place-content

上面两个属性的简写

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    /*
    相当于
    justify-content: center;
    align-content: center;
    */
    place-content: center;
}

在这里插入图片描述

14、grid-auto-columns

用来设置多出来的项目的宽

我这里内容区设置三行三列的行列为100px，这样就多出来一个div10没有设置。

在这里插入图片描述

可以单独给多出来的元素设置宽

grid-auto-columns: 200px; /* 不管用，不晓得 */

15、grid-auto-rows

用来设置多出来的项目的高

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(3,100px);
    grid-auto-rows: 50px;
}

在这里插入图片描述

项目属性

项目共有10个属性

1、grid-column-start

用来指定item的具体位置，根据在哪根网格线(起始线)，和下面的属性一起使用，在下面一起演示

2、grid-column-end

用来指定item的具体位置，根据在哪根网格线(结束线)

比如我第一个元素需要使用所在行上两个格子

在这里插入图片描述

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.d1{
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: #fff799;
}

在这里插入图片描述

3、grid-row-start

用来指定item的具体位置，根据在哪根网格线(起始线)，和下面的属性一起使用，在下面一起演示

4、grid-row-end

用来指定item的具体位置，根据在哪根网格线(结束线)

比如我第一个元素需要使用所在行上两个格子，所在列上两个格子

在这里插入图片描述

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.d1{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: #fff799;
}

在这里插入图片描述

5、grid-column

1和2的简写形式，使用 / 分隔

.d1{
    /* grid-column-start: 1;
    grid-column-end: 3; */
    grid-column: 1 / 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: #fff799;
}

6、grid-row

3和4的简写形式，使用 / 分隔

.d1{
    grid-column-start: 1;
    grid-column-end: 3;
    /* grid-row-start: 1;
    grid-row-end: 3; */
    grid-row: 1 / 3;
    background-color: #fff799;
}

7、grid-area

指定项目放在哪一个区域，搭配grid-template-areas使用

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    /* grid-template-areas: 'a b c'
    'd e f'
    'g h i'; */
    grid-template-areas: 'a a a'
        'b b b'
        'c c c'
        'd d d';
}
.d1{
    grid-area: b;/* 放在b区，独占一行 */
    background-color: #fff799;
}

在这里插入图片描述

8、justify-self

justify-self属性设置单元格内容的水平位置 (左中右)，跟justify-items属性的用法完全一致但只作用于单个项目(水平方向)，也是四个值

  • start
  • end
  • center
  • stretch
8.1、start
#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    justify-self: start;
    background-color: #fff799;
}

在这里插入图片描述

8.2、end
#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    justify-self: end;
    background-color: #fff799;
}

在这里插入图片描述

8.3、center
#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    justify-self: center;
    background-color: #fff799;
}

在这里插入图片描述

9、align-self

align-self属性设置单元格内容的垂直位置 (上中下)，跟align-items属性的用法完全一致也是只作用于单个项目(垂直方向)，和上面的值一样

9.1、start
#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    align-self: start;
    background-color: #fff799;
}

在这里插入图片描述

9.2、end
align-self: end;

在这里插入图片描述

9.3、center
align-self: center;

在这里插入图片描述

10、place-self

上面两个的简写

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    /*
      相当于
      justify-self: center;
      align-self: center;
    */
    place-self: center;
    background-color: #fff799;
}

在这里插入图片描述

大米☋
关注
工业化、响应式的的CSS3 grid布局应用及其向后兼容问题-- 下 --（翻译自smashingmagazine，有删改）
凝视深渊
07-20 7336
接上，[工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 –（翻译自smashingmagazine，有删改）](工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 –（翻译自smashingmagazine，有删改）)live example应用先进的格子布局和功能步骤如下： 1.从最窄的屏幕开始设计布局 2.逐渐增大屏幕，直到一切变得看上去奇怪 3.加断点
图解 CSS Grid 布局
小马甲
07-17 2781
在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。
学习CSS Grid 网格布局（入门）
Mr_yq的博客
01-09 839
CSS Grid 布局据说很火。该布局系统规范最近获得了主流浏览器的支持，包括最新版本的 Firefox，Chrome，Opera，Safari和 Edge  介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。 Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。它还能使我们在不改变任何HTML的情况下，使用 CSS 来定位和调整网格内的
最强大的 CSS 布局 —— Grid 布局
最新发布
每天都要努力学习哦~~
09-30 2336
应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。：可以简化重复的值。布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。
CSS—— grid布局
mantou_riji的博客
05-14 5788
grid 是一个 CSS 简写属性，可以用来设置以下属性： 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas， 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow， 间距属性 grid-column-gap 和 grid-row-gap。none：表示不明确的网格，所有的行和其大小都将由grid-auto-rows 属性隐式的指定。
CSS Grid网格布局
m0_65029152的博客
06-26 1631
记录一下前端的grid布局，一个很有趣的布局方法；
CSS之grid布局
一只努力搬砖的打工妹纸
06-30 1565
grid布局
【css】css中的 Grid 布局
呆呆狗
12-02 1333
css中的 Grid 布局
CSS之Grid网格布局
swimming_in_IT_的博客
05-31 944
一：概述 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针...
awesome-css-grid：CSS网格资源的精选列表
01-30
7. **CSS Grid布局与Flexbox的比较**：虽然两者都可以实现复杂的布局，但它们各有侧重点。Flexbox适合单轴布局，而Grid更适合两轴布局和固定结构的页面设计。 8. **响应式设计**：CSS Grid与媒体查询结合，可创建...
详细解读CSS布局-Grid布局.docx
02-08
CSS Grid布局是现代网页设计中一种强大的二维布局系统，它使得创建复杂的、响应式的页面布局变得更加简单。Grid布局通过创建行和列的网格结构，允许内容在这些网格单元中灵活地定位和对齐。下面将详细解释Grid布局的...
css-grid-course
03-06
在深入探讨"CSS网格课程"之前，让我们先理解CSS Grid布局系统的核心概念。CSS Grid，全称为CSS Grid Layout，是Web开发中一种强大的二维布局系统，用于创建网格结构，允许内容在行和列中对齐，实现更精细的网页设计...
css-grid-practice:CSS Grid 实践项目
05-29
在本实践项目“css-grid-practice”中，我们将深入探讨CSS Grid布局系统，这是一种强大的二维布局工具，可以方便地创建网格结构，适用于网页设计和开发。由布伦登·埃文斯（Brendan Evans）创作，这个项目提供了一个...
CSS-Grid-Area-Naming
03-30
总结来说，`grid-area`是CSS Grid布局中的一个重要工具，通过命名网格区域，我们可以更高效、灵活地构建网页布局。结合`grid-template-areas`，我们可以实现清晰、可维护的代码，从而提升开发效率和用户体验。在实际...
CSS-grid布局
qq_41587763的博客
08-10 1613
上面写了9个元素，分别给了不同的颜色，根据 grid-template-columns和grid-template-rows或者grid-template-columns来设置他们的大小，这里的特殊就是，如果不给里面各个单元格大小，那么设置的列宽和行高就会去设置成每个单元格的大小，如果给了大小，那么设置的就是每个单元格之前的间距了。这里指的无限大也就是没有父级设置大小。grid布局就是将容器划分为行和列，产生单元格，然后在指定的单元格，可以看作是二维布局，我们一直经常用的flex布局也就可以看作一维布局。
CSS 之 grid 网格布局
weixin_45092437的博客
09-16 1938
设置display: grid;的元素，即为容器元素，容器属性共有17条，包含以下：grid-template-columns、grid-template-rows、column-gap、row-gap、gap等等 容器的直接子元素即为项目元素，项目属性共有10条，包含以下：grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、justify-self、align-self等等
CSS grid 布局
学习笔记
03-25 688
CSS grid 布局 display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 20% 20% 20% 20% 20%; grid-gap: 10px 10px;
【CSS】css grid 布局
Riptide
05-14 616
css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。比如我们要达到下面这样一个效果要怎么做？图中有16个元素，我们要其自适应宽度，按照我们以前的想法肯定是直接通过media，媒体查询来完成这个，但是代码肯定不会简洁，但是我们通过grid 布局只需要几行代码!  代码长这样：CSS：#container { display: grid; ...
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 5万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
css+grid布局
02-23
CSS Grid布局是一种用于网页布局的强大的CSS模块。它提供了一种二维网格系统，可以将页面划分为行和列，并通过在网格单元中放置元素来创建复杂的布局。 使用CSS Grid布局，你可以轻松地定义网格容器和网格项。网格容器是包含网格项的父元素，而网格项则是直接放置在网格容器内的子元素。 以下是CSS Grid布局的一些重要概念和特性： 1. 网格容器（Grid Container）：通过设置`display: grid`来创建一个网格容器。它是网格布局的父元素。 2. 网格项（Grid Item）：直接放置在网格容器内的子元素。可以使用`grid-column`和`grid-row`属性来指定网格项在网格中的位置。 3. 网格线（Grid Line）：网格中的水平线和垂直线。可以通过指定行号和列号来引用网格线。 4. 网格轨道（Grid Track）：两个相邻网格线之间的空间，可以是行轨道（row track）或列轨道（column track）。 5. 网格单元（Grid Cell）：由四个相邻的网格线围成的矩形区域。 6. 网格区域（Grid Area）：由多个网格单元组成的矩形区域。 使用CSS Grid布局，你可以通过以下方式来创建网格布局： 1. 定义网格模板（Grid Template）：通过设置`grid-template-rows`和`grid-template-columns`属性来定义网格的行和列。 2. 放置网格项：使用`grid-column`和`grid-row`属性来指定网格项在网格中的位置。 3. 调整网格布局：可以使用其他属性如`grid-gap`、`grid-auto-rows`、`grid-auto-columns`等来调整网格布局。 CSS Grid布局提供了灵活且强大的布局能力，可以轻松实现复杂的网页布局。它比传统的基于浮动和定位的布局方法更直观和易于理解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值