CSS—— grid布局

文章目录

Grid布局含义
- Grid布局和flex布局的区别
Grid布局的基本概念
- 基本概念
- 显示网格和隐式网格
设置Grid布局容器
Grid布局容器属性
- 显示网格属性
- - grid-template-rows
  - grid-template-columns
  - grid-template-areas
  - grid-template
- 隐式网格属性
- - grid-auto-rows
  - grid-auto-columns
  - grid-auto-flow
- 间距属性
- - column-gap（ grid-column-gap）
  - row-gap （ grid-row-gap）
- grid
- 排列方式属性
- - justify-items、align-items 、place-items
  - justify-content、align-content 、place-content
Grid布局网格项属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-column-end
- grid-row
- grid-column
- grid-area

Grid布局含义

grid布局是CSS中的一种二维布局系统，它允许开发者通过定义行和列来创建网格结构，并控制网格项在网格中的位置和大小。

Grid布局和flex布局的区别

Grid布局：

二维布局系统：
Grid布局是为了解决二维布局系统而设计的，允许同时控制行和列的布局，非常适合创建复杂的网格结构。
定义结构：
通过定义grid-template-columns和grid-template-rows定义网格的行和列。通过grid-area定义网格区域，以及grid-column和grid-row等属性在项目上控制当个网格项的位置
单元格：
Grid布局强调的是将页面划分为一个个单元格，每个单元格可以换分不同的元素，非常适合对称和不对称的布局。

flex布局：

一维布局系统：Flex布局主要用于一维空间的布局，即沿着一个轴（横向或纵向分配空间，非常适合列表、导航条、工具栏、页脚等元素的排列）
流动和对齐：通过flex-direction控制元素的排列方向，justify-content和align-items等属性控制元素在主轴和交叉轴上的布局方式
自适应：flex布局擅长让容器内的项目自动调整大小以适应可用的空间。

flex布局的相关内容参见：https://blog.csdn.net/mantou_riji/article/details/124253716?

在这里插入图片描述

在开发过程中这两种布局可以一起使用来实现更丰富的布局效果。

Grid布局的基本概念

基本概念

容器：将一个元素设置为display:grid，该元素就变成了网格容器。它定义了一个包含子元素的网格布局上下文。
网格项( Grid 项 )：网格容器内的子元素自动成为网格项，他们按照网格容器定义的布局规则排列。
行（Rows）与列（Columns）：Grid布局通过定义行和列来创建网格结构。行和列的大小通过各种Grid属性来控制。
网格线：划分网格的水平和垂直线
网格轨道：网格轨道是相邻两个网格线之间的空间，可以是行轨道或列轨道。
网格单元：由行和列形成的单个空间，grid布局的最基本的布局单位。
区域：使用grid-template-areas属性，可以为网格定义命名区域。这样就可以通过名称而不是行和列的数字来放置Grid项。

显示网格和隐式网格

显示网格就是使用grid-template-rows和grid-template-columns属性显示定义的网格。
隐式网格就是没有使用属性定义的通过使用自动布局创建出来的网格。

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 100px 100px;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell">One</div>
      <div class="table-cell">Two</div>
      <div class="table-cell">Three</div>
      <div class="table-cell">Four</div>
      <div class="table-cell">Five</div>
      <div class="table-cell">Six</div>
      <div class="table-cell">Seven</div>
      <div class="table-cell">Eight</div>
    </div>
  </body>
</html>

在这里插入图片描述

设置Grid布局容器

首先需要将容器设置为grid布局，只需要为容器添加display: grid即可。
常使用的grid布局的相关选项：

属性	含义
display：grid	表示该容器是一个grid布局的块级元素
display：inline-grid	表示该容器是一个grid布局的行内元素
display：subgrid	继承父元素的grid布局

Grid布局容器属性

显示网格属性

grid-template-rows

该属性是基于 网格行 的维度，去定义网格行轨道的高度。
取值：

none：表示不明确的网格，所有的行和其大小都将由grid-auto-rows 属性隐式的指定。
<length>：非负值的长度大小
<percentage>：非负值且相对于网格容器的百分比。
<flex>：非负值，用单位 fr 来定义网格轨道大小的弹性系数。每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。
max-content：是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
min-content：是一个用来表示以网格项的最小内容来占据网格轨道的关键字。
minmax(min, max)：是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。
auto：如果该网格轨道为最大时，该属性等同于 max-content ，为最小时，则等同于 min-content 。
fit-content( [ <length> | <percentage> ] )
length：表示划分为的行数
percentage：表示每行的高度
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复行的表达式。
positive-integer：表示要设置相同行的个数
track-list：表示设置每行的高度

eg：

grid-template-rows: 40px 4em 40px;
grid-template-rows: 1fr 2fr 1fr;
grid-template-rows: 3ch auto minmax(10px, 60px);
grid-template-rows: fit-content(40%); //将容器的行高度设置为40%，能设置几行就设置几行
grid-template-rows: repeat(3, 200px); //设置3行高度为200px的行
grid-template-rows: repeat(auto-fill, 100px); //将容器的行高度设置为100px，能设置几行就设置几行
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

grid-template-columns

grid-template-columns属性是基于 网格列 的维度，去定义网格列轨道的宽度，和 grid-template-rows列的可取值一样。
示例：

grid-template-columns: 60px 60px;
grid-template-columns: 1fr 60px;
grid-template-columns: 1fr 2fr;
grid-template-columns: 8ch auto;

grid-template-areas

grid-template-areas可以将网格项组合成网格区块。
取值：

none：网格容器没有定义任何的网格区块 (grid areas)。
<string>+：多行字符串，一行字符串代表一个表格行，一个字符串中使用空格分割，分割的每一个单元代表每一列。
空格分割后的每一个单词表示一个网格项，若单词相同表示这两个网格项表示为一个网格区块，存储一个元素即可，同时如果元素要放在该网格区块需要设置css的grid-area属性为该网格区块的表示单词。（注意：最后有几个网格块，该容器内就应该有几个元素）。

示例1：

<!DOCTYPE html>
<html lang="en">
  <style>
    #page {
      display: grid; /* 1.设置 display 为 grid */
      width: 100%;
      height: 250px;
      grid-template-areas:
        "head head"
        "nav  main"
        "nav  foot"; /* 2.区域划分 当前为 三行 两列 */
      grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
      grid-template-columns: 150px 1fr;
    }

    #page > header {
      grid-area: head; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
      background-color: #8ca0ff;
    }

    #page > nav {
      grid-area: nav;
      background-color: #ffa08c;
    }

    #page > main {
      grid-area: main;
      background-color: #ffff64;
    }

    #page > footer {
      grid-area: foot;
      background-color: #8cffa0;
    }
  </style>
  <body>
    <section id="page">
      <header>Header</header>
      <nav>Navigation</nav>
      <main>Main area</main>
      <footer>Footer</footer>
    </section>
  </body>
</html>

在这里插入图片描述
示例2：

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 200px 200px 200px;
      grid-template-rows: 100px 100px 100px;
      grid-template-areas:
        "b b a"
        "b b c"
        "b b c";
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="grid-area: a">One</div>
      <div class="table-cell" style="grid-area: b">Two</div>
      <div class="table-cell" style="grid-area: c">Three</div>
    </div>
  </body>
</html>

在这里插入图片描述

grid-template

grid-template 是CSS 属性grid-template-areas、grid-template-rows、grid-template-columns简写，用以定义网格中行、列与分区。

grid-template: 
   "a a a" 40px
   "b c c" 40px
   "b c c" 40px / 1fr 1fr 1fr;

每个grid-template-areas的值后面的值表示的是行的高度。
最后一行grid-template-areas的值后面的添加完行的高度后添加/ grid-template-columns的值表示，每列的宽度。

eg：

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      height: 500px;
      grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr;
    }

    .box1 {
      background-color: lime;
      grid-area: a;
    }

    .box2 {
      background-color: yellow;
      grid-row: 2 / 4;
      grid-area: b;
    }

    .box3 {
      background-color: blue;
      grid-row: span 3 / 7;
      grid-area: c;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="box1 box">One</div>
      <div class="box2 box">Two</div>
      <div class="box3 box">Three</div>
    </div>
  </body>
</html>

在这里插入图片描述

隐式网格属性

如果没有使用显示网格属性就会默认使用隐式网格属性。

grid-auto-rows

grid-auto-rows：用于指定隐式创建的行轨道大小。

取值：

<length>：一个非负的长度。
<percentage>：相对于网格窗口块尺寸的非负 <percentage> 值。如果网格容器的块尺寸是不确定的，则百分比值将被视为 auto。
<flex>：非负的、以fr为单位的维度，指定轨道的弹性因子。每个 <flex>尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。
max-content:：关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。
min-content：关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。
minmax(min, max)：函数符号，定义一个不小于min且不大于max的尺寸范围。
auto：根据内容大小设置行高。

eg：

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 500px;
      /* grid-template-rows: 100px 100px 100px; */
      grid-auto-rows: auto;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 200px">Three</div>
    </div>
  </body>
</html>

在这里插入图片描述

grid-auto-columns

grid-auto-columns：用于指定隐式创建的列轨道的大小。
和grid-auto-rows的取值一致，但是auto属性表示不是根据内容展开，如果是块元素auto默认占据一行。

eg：

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: auto 200px auto;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 200px">Three</div>
    </div>
  </body>
</html>

在这里插入图片描述

grid-auto-flow

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定网格项在自动布局中怎样排列。
取值：

row：该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。
column：该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。
dense：该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

grid-auto-flow的取值可以是上述取值的一个或两个。

eg：

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template: repeat(4, 1fr) / repeat(2, 1fr);
      grid-auto-flow: row; /* or 'row', 'row dense', 'column dense' */
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 100px">Three</div>
      <div class="table-cell" style="line-height: 100px">Four</div>
      <div class="table-cell" style="line-height: 100px">Five</div>
      <div class="table-cell" style="line-height: 100px">Six</div>
      <div class="table-cell" style="line-height: 100px">Seven</div>
    </div>
  </body>
</html>

在这里插入图片描述
如果修改为·grid-auto-flow: column;

间距属性

column-gap（ grid-column-gap）

column-gap 属性用来设置元素列之间的间隔大小。
取值：

normal表示列之间的间隔宽度。在 多列布局 时默认间隔为 1em，其他类型布局默认间隔为 0。
<length>：用 <length> 来定义列之间的间隔大小。而且 <length> 值必须是非负数的。
<percentage>：用 <percentage>（百分比）来定义列之间的间隔大小。

row-gap （ grid-row-gap）

row-gap 属性用来设置行元素之间的间隙大小。
取值和column-gap取值一样。

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template: repeat(4, 1fr) / repeat(2, 1fr);
      grid-auto-flow: column;
      column-gap: 20px;
      row-gap: 1ch;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 100px">Three</div>
      <div class="table-cell" style="line-height: 100px">Four</div>
      <div class="table-cell" style="line-height: 100px">Five</div>
      <div class="table-cell" style="line-height: 100px">Six</div>
      <div class="table-cell" style="line-height: 100px">Seven</div>
    </div>
  </body>
</html>

在这里插入图片描述

grid

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。
取值：

<'grid-template'>
定义了 grid-template，其包含 grid-template-columns，grid-template-rows 和 grid-template-areas。
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
通过 grid-template-rows 属性显式设置行轨道来设置自动流（grid-template-columns 属性设为 none）
通过 grid-auto-columns 明确该如何自动重复列轨道（同时grid-auto-rows属性设为 auto）
grid-auto-flow 属性也被相应的设置为 column，并可附有 dense。
所有其余 grid 次级属性被重置为初始值。
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
通过 grid-template-columns 属性显式设置列轨道来设置自动流（grid-template-rows 属性设为 none）
通过 grid-auto-rows 明确该如何自动重复行轨道（同时grid-auto-columns属性设为 auto）
grid-auto-flow 属性也被相应的设置为 row，并可附有 dense。
所有其余 grid 次级属性被重置为初始值。

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      height: 500px;
      /* grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr; */
      grid: auto-flow / 1fr 1fr 1fr;
    }

    .box1 {
      background-color: lime;
      /* grid-area: a; */
    }

    .box2 {
      background-color: yellow;
      /* grid-row: 2 / 4; */
      /* grid-area: b; */
    }

    .box3 {
      background-color: blue;
      /* grid-row: span 3 / 7; */
      /* grid-area: c; */
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="box1 box">One</div>
      <div class="box2 box">Two</div>
      <div class="box3 box">Three</div>
    </div>
  </body>
</html>

在这里插入图片描述
其他取值示例：

grid: auto-flow dense / 40px 40px 1fr;
grid: repeat(3, 80px) / auto-flow;

排列方式属性

justify-items、align-items 、place-items

justify-items 属性设置单元格内容的水平位置（左中右）;
align-items 属性设置单元格的垂直位置（上中下）;

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

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

justify-content、align-content 、place-content

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），包括items和空白的分布空间，
align-content 属性是整个内容区域的垂直位置（上中下）。
它们都有如下的属性值：

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

start：对齐单元行的起始边缘
end：对齐单元行的结束边缘
center：单元行内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍；
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔；
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔；

Grid布局网格项属性

grid-column-start

grid-column-start CSS属性指定了一个网格项的列的开始位置，左边框所在的垂直网格线。

取值：

auto
关键字，指示该属性对网格项的放置没有任何影响。
<custom-ident>
取值为具有名称的列的名称
n
将第 n 条网格线用于放置网格项。如果给定负整数，则从显式网格的端边缘开始反向计数，为0无效，默认是1。
n && <custom-ident>
取所有名称为custom-ident的列的第n个作为起始值
span && [ n || <custom-ident> ]
为网格单元定义一个跨度，表示两个列之间的距离是n个单位单元列的宽度。
<custom-ident> 的值不能取span

示例：

/* Keyword value */
grid-column-start: auto;

/* <custom-ident> value */
grid-column-start: somegridarea;

/* <integer> + <custom-ident> values */
grid-column-start: 2;
grid-column-start: somegridarea 4;

/* span + <integer> + <custom-ident> values */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: span somegridarea 5;

grid-column-end

grid-column-end CSS属性指定了一个网格项的列的结束位置，右边框所在的垂直网格线。
和grid-column-start取值一样。

grid-row-start

grid-column-end CSS属性指定了一个网格项的行的开始位置，上边框所在的垂直网格线
和grid-column-start取值一样。

grid-column-end

grid-column-end CSS属性指定了一个网格项的行的结束位置，下边框所在的垂直网格线
和grid-column-start取值一样。

eg：

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 100px;
    }
    .box {
      background-color: lemonchiffon;
      border: orange 1px solid;
    }

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

    .box2 {
      grid-column-start: 1;
      grid-row-start: 3;
      grid-row-end: 5;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="box1 box">One</div>
      <div class="box2 box">Two</div>
      <div class="box3 box">Three</div>
      <div class="box4 box">Four</div>
      <div class="box5 box">Five</div>
    </div>
  </body>
</html>

在这里插入图片描述

grid-row

grid-row 属性是一种 grid-row-start 和 grid-row-end 的缩写（shorthand）形式。两个取值之间使用/分割。

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      height: 500px;
      grid-template-columns: 500px;
      grid-template-rows: repeat(6, 1fr);
    }

    .box1 {
      background-color: lime;
    }

    .box2 {
      background-color: yellow;
      grid-row: 2 / 4;
    }

    .box3 {
      background-color: blue;
      grid-row: span 2 / 7;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="box1 box">One</div>
      <div class="box2 box">Two</div>
      <div class="box3 box">Three</div>
    </div>
  </body>
</html>

在这里插入图片描述
若：

.box3 {
      background-color: blue;
      grid-row: span 3 / 7;
    }

则：
在这里插入图片描述

grid-column

grid-column CSS 属性是 grid-column-start 和 grid-column-end 的简写属性。两个属性之间使用/进行分割。

grid-column: 1 / 3;

grid-area

CSS 属性 grid-area 是一种对于 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end （按照该顺序）的简写。之间使用/进行分割。

grid-area: auto / auto / auto / auto;