关于Grid Layout的一切

/ 前端
# Grid Layout # CSS

关于Gird布局的一切

在此之前

什么是GridLayout？

CSS Grid 是一种用于网页设计的二维布局系统，允许设计师根据行列来排列元素，提供对齐、分布间距等高级功能，使得创建复杂但响应迅速的布局变得更加容易。

下面是来自w3school的介绍：

我对于二维布局的一些理解

在flexbox中：

在Grid布局中：

上面的表述可能比较抽象，需要大家自己写些demo来加深理解

你需要熟悉的一些单词

注意，在使用时单词都是小写

下面是划分表格部分

display

在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器

在这个例子中：

grid-template-columns 和 grid-template-rows

grid-template-columns 和 grid-template-rows 是 CSS Grid 布局中用于定义网格容器内列和行的尺寸的关键属性。通过这两个属性，你可以精确控制网格布局的结构。

grid-template-columns：定义网格容器中的列宽

1
grid-template-columns: <track-size> ... | <line-name> <track-size> <line-name> ...;

grid-template-rows：定义网格容器中的行高

1
grid-template-rows: <track-size> ... | <line-name> <track-size> <line-name> ...;

其中 <track-size> 可以是长度（如 px, rem 等）、百分比、auto 或者 fr 单位等，<line-name> 是可选的网格线名称

觉得有些疑惑？看下面具体的例子就好理解了

设置固定值

下面设定的列宽分别为300px 200px 300px，行高分别为300px 200px

1
2
3
4
5
6
7
.container{
    display:grid;
    /* 声明三列，宽度分别为300px,200px,300px */
    grid-template-columns:300px 200px 300px;
    /* 声明三行，高度分别为300px,200px */
    grid-template-rows:300px 200px ;
  }

repeat()函数

repeat() 函数在 CSS Grid 布局中是一个非常有用的工具，它允许你简化重复的行或列定义。通过 repeat() 函数，你可以轻松地创建具有相同尺寸的多个轨道（行或列），而无需重复输入相同的值。

1
repeat(数量, 轨道大小)

下面代码会创建两行三列六个300px*300px的盒子

1
2
3
4
5
6
7
8
9
10
.container{
    display:grid;
    min-height:100vh;  
    background-color: pink;
    /* 声明三列，宽度分别为300px,300px,300px */
    grid-template-columns:repeat(3,300px);
    /* 声明三行，高度分别为300px,300px */
    grid-template-rows:repeat(2,300px) ;
    grid-gap:10px 10px ;
  }

auto 关键字

auto 可以用于定义网格轨道（行或列）的大小。它允许轨道根据其内容自动调整大小。

1
2
3
4
5
6
7
8
9
.container{
    display:grid;
    min-height:100vh;  
    background-color: pink;
    grid-template-columns: 300px auto 300px; /* 第二列列宽根据内容自动调整 */
    grid-template-rows: 200px auto; /* 第二行高根据内容自动调整 */
    grid-gap:10px 10px ;
    
  }

fr 单位

fr 是“fraction”的缩写，表示网格容器中可用空间的一小部分。它允许你为网格轨道分配相对比例的空间。

1
2
3
4
5
6
7
8
9
10
.container{
    display:grid;
    min-height:100vh;  
    background-color: pink;

    grid-template-columns: 1fr 2fr 1fr;/* 第二列是其他两列的两倍宽 */  
    grid-template-rows: 1fr 2fr 1fr; /* 第二行是第一行的两倍宽 */ 

    grid-gap:10px 10px ;
  }

注意，上述例子是按容器空间进行分配，可以看到网格容器的宽度被占满了

minmax() 函数

minmax() 函数允许你指定一个轨道的最小和最大尺寸。这使得轨道可以动态地调整大小，但不会小于指定的最小值或大于最大值。

1
minmax(minimum, maximum)

auto-fill 和 auto-fit

这两个关键字通常与 repeat() 函数一起使用，用于控制网格如何根据可用空间自动填充轨道数量。

区别：

1
2
3
4
5
6
7
8
9
.container{
   display:grid;
   min-height:100vh;  
   background-color: pink;

   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 根据容器宽度自动填充列 */
    
   grid-gap:10px 10px ;
 }

使用 auto-fill 或 auto-fit 结合 minmax() 可以创建响应式的网格布局，适应不同的屏幕尺寸。

gap、row-gap 和 column-gap

在 CSS Grid 布局中，gap、row-gap 和 column-gap 是用于控制网格项之间间距的关键属性。这些属性取代了早期的 grid-gap、grid-row-gap 和 grid-column-gap，提供了更简洁和一致的语法。

使用 gap

如果你想为行和列设置相同的间距,只需设定一个值即可，如果你想分别为行和列设置不同的间距：

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns:repeat(3,300px);
  grid-template-rows:repeat(2,300px) ;
  gap: 10px 20px; /* 行间距为10px，列间距为20px */
}

使用 row-gap 和 column-gap

如果你想单独设置行或列的间距：

1
2
3
4
5
6
7
.container {
  display: grid;
  grid-template-columns:repeat(3,300px);
  grid-template-rows:repeat(2,300px) ;
  row-gap: 10px; /* 仅设置行间距为10px */
  column-gap: 20px; /* 仅设置列间距为20px */
}

grid-template-areas

grid-template-areas 是 CSS Grid 布局中一个非常强大的特性，它允许你通过命名网格区域来定义布局结构。使用 grid-template-areas 可以让你的 CSS 代码更加直观和易于理解，尤其是在处理复杂的布局时。看下面这个例子

1
2
3
4
5
6
<div class="container">
    <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
</div>
1
2
3
4
5
6
 .container {
  display: grid;
  min-height:100vh;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 500px auto;
}

下面是如何使用grid-template-areas 

1
2
3
4
5
6
7
8
9
10
11
12
 .container {
  display: grid;
  min-height:100vh;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 500px auto;
  
/* 给每个网格项指定一个名字（通过 `grid-area` 属性） */
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.header {
  grid-area: header;
  background-color: #fdd;
}

.main {
  grid-area: main;
  background-color: #dfd;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddf;
}

.footer {
  grid-area: footer;
  background-color: #ffd;
}

grid-auto-flow

grid-auto-flow 是 CSS Grid 布局中的一个属性，它控制着自动放置网格项的方式。当你没有明确指定每个网格项的位置（即没有使用 grid-row 和 grid-column 或者 grid-area 来定位它们）时，grid-auto-flow 决定了这些未明确位置的网格项如何被分配到网格中。

注意到，此时按默认顺序填充，实际上第一行上的空位Small item 5是可以填充到此位置的，你需要添加dense属性来达到需求

1
2
3
4
5
6
7
8
9
10
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列 */
  grid-template-rows: repeat(5, 100px); /* 5行 */
  gap: 10px; /* 网格间距 */
  grid-auto-flow: row dense; /* 启用dense算法以尝试填满所有空位 */
  font-size:30px;
  color:white;
  text-align:center;
}

span

在 CSS Grid 布局中，**span 是一个非常有用的关键词，它允许网格项跨越多个行或列。**通过使用 span，你可以指定某个网格项应该跨越多少个网格轨道（即行或列），从而创建更复杂和灵活的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义三列等宽 */
  grid-template-rows: repeat(3, 100px); /* 定义三行，每行高度为100px */
  gap: 10px; /* 设置网格间距 */
}

.item1 {
  background-color: lightblue;
}

.item2 {
  background-color: lightgreen;
  /* 让 item2 跨越两列 */
  grid-column: span 2;
}

.item3 {
  background-color: lightcoral;
  /* 让 item3 跨越两行 */
  grid-row: span 2;
}

一个有点神奇的概念

刚开始学的时候我执着于主轴和侧轴的概念，不过现在看来这取决于我们建立网格的视角

在 CSS Grid 布局中，主轴和侧轴的概念不像在 Flexbox 中那样固定为水平或垂直方向。实际上，在 Grid 布局里，主轴（main axis）和侧轴（cross axis）的方向取决于你如何定义网格的行和列。

调整每个单元格的样式

网格不一定占满整个浏览器界面，相对于整个浏览器界面还是有不同位置的，所以需要content调整

调整单元格内部样式

每个单元格内部也是可以调整的，这就要用到items了，需要注意的是，这会作用到每个单元格

需要注意的是，上面的调整都是在顶级容器container中的样式调整，而当你想精准控制单元格的样式时，需要用self来调整单元格样式

三者的区分

下面以justify来进行说明

1. justify-content

1
2
3
4
.container {
  display: grid;
  justify-content: center; /* 所有网格项在其容器内水平居中 */
}

2. justify-items

1
2
3
4
.container {
  display: grid;
  justify-items: center; /* 所有网格项在其单元格内水平居中 */
}

3. justify-self

1
2
3
.special-item {
  justify-self: end; /* 仅此网格项靠单元格的结束边对齐 */
}

区别总结

然后呢？

弄清楚上面的区别以后，你就可以把flex布局里面的知识迁移过来了