css grid

什么是 CSS Grid？

CSS Grid，全称 CSS Grid Layout Module，也就是“网格布局模块”。  它是一种二维布局系统，能让你把网页划分成一个个的行和列，然后像搭积木一样，把元素放到这些网格单元格里。

Grid 布局和 Flexbox 布局，主要区别在哪儿呢

• Flexbox 是一维布局： 它更擅长处理单行或者单列的元素排列，比如导航栏、列表这些。
• Grid 是二维布局：  行和列都能同时控制，更适合做复杂的页面结构，像整个网站的布局、各种卡片式设计等等。

理解Grid

1. Grid 容器 (Grid Container) 和 Grid 项目 (Grid Item) 跟 Flexbox 类似，Grid 布局也需要一个容器和一些项目。

   .container {
       display: grid; /* 或者 display: inline-grid */
   }

   • Grid 容器：  用 display: grid; 或者 display: inline-grid;  把一个元素变成 Grid 容器。
   • Grid 项目： Grid 容器的所有直接子元素，就自动变成 Grid 项目了。
2. 网格线 (Grid Lines) 网格线就是构成 Grid 布局的水平和垂直分割线，用来定位 Grid 项目。 你可以想象成棋盘上的那些线。
   • 行号 (Row Line Numbers)：从上往下数，1, 2, 3...
   • 列号 (Column Line Numbers)：从左往右数，1, 2, 3...
3. 网格轨道 (Grid Tracks)   网格轨道是两条相邻网格线之间的空间，可以理解成 Grid 布局里的行或列。
4. 网格单元格 (Grid Cells) 网格单元格是 Grid 布局的最小单位，四条网格线围起来的那个小格子。
5. 网格区域 (Grid Areas) 网格区域就是一个或多个相邻的网格单元格组成的区域。 你可以用 grid-template-areas 属性来定义网格区域。

Grid容器常用属性

grid-template-columns 和 grid-template-rows：  用来定义网格的列和行。

.container {
    grid-template-columns: 100px20%1fr; /* 定义三列 */
    grid-template-rows: 50px1fr; /* 定义两行 */
}
/* repeat() 函数的例子 */
    .container {
        grid-template-columns: repeat(3, 1fr); /* 创建三个宽度为 1fr 的列 */
    }
/* minmax() 函数的例子 */
.container {
grid-template-columns: 1fr minmax(200px, 300px) 1fr; /* 中间那列最小 200px，最大 300px */
}

• 可以用固定值（比如 100px）、百分比（比如 20%）、fr 单位（按比例分配剩余空间）等等。
• repeat() 函数可以简化重复值的写法。
• minmax() 函数可以设置尺寸的最小值和最大值。

grid-template-areas： 定义网格区域。

.container {
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

• 用你起的名字来代表网格区域。
• .  表示空的网格单元格。

grid-auto-columns 和 grid-auto-rows：  定义自动生成的网格轨道（隐式网格）的大小。

.container {
    grid-template-columns: 100px 100px;
    grid-auto-columns: 50px; /* 自动生成的列宽为 50px */
}
当 Grid 项目的数量超出你显式定义的网格轨道数量时，就会自动创建隐式网格。

grid-auto-flow：  定义自动布局算法的行为。

.container {
    grid-auto-flow: column; /* 先填充列 */
}
row (默认值)：  先按行排列，放满了再换列。
column： 先按列排列，放满了再换行。
dense： 尽量填满网格中比较小的空隙。

grid-gap（或者直接用 gap）： 定义网格行和列之间的间距。

.container {
    gap: 20px; /* 行间距和列间距都是 20px */
    /* 等同于 */
    /* grid-row-gap: 20px;*/
    /* grid-column-gap: 20px; */

}
是 grid-row-gap 和 grid-column-gap 的简写方式。

align-items:  设置项目在单元格内的垂直对齐方式（沿着列轴）

• start: 上对齐。
• end: 下对齐。
• center: 居中对齐。
• stretch (默认): 拉伸填满整个单元格高度。

place-items:  align-items 和 justify-items 的简写

place-items: <align-items> <justify-items>

justify-content：  定义整个内容区域在容器内的水平对齐方式（沿着行轴）

• start： 左对齐。
• end： 右对齐。
• center： 居中对齐。
• space-between： 两端对齐，项目之间的间隔相等。
• space-around： 每个项目两侧的间隔相等。
• space-evenly： 项目与项目之间、项目与容器边缘之间间隔相等。

align-content：  定义整个内容区域在容器内的垂直对齐方式（沿着列轴）

• start： 上对齐。
• end： 下对齐。
• center： 居中对齐。
• space-between： 两端对齐，项目之间的间隔相等。
• space-around： 每个项目两侧的间隔相等。
• space-evenly： 项目与项目之间、项目与容器边缘之间间隔相等。

place-content： align-content 和 justify-content 的简写

• place-content: <align-content> <justify-content>;

Grid项目 常用属性

下面这些属性是用来控制 Grid 项目的行为的，可以让你精确地定位每个元素：

grid-column-start、grid-column-end、grid-row-start、grid-row-end：  定义项目的位置

.item {
    grid-column-start: 2; /* 从第二条列线开始 */
    grid-column-end: 4; /* 到第四条列线结束 */
    grid-row-start: 1; /* 从第一条行线开始 */
    grid-row-end: span 2; /* 跨越两行 */
}
可以使用网格线编号来定位。
可以用 span 关键字来指定项目跨越几个网格轨道。

grid-column 和 grid-row：  是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写

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

grid-area：  指定项目放到哪个网格区域

.item {
    grid-area: header; /* 放到名为 "header" 的区域 */
}

可以用 grid-template-areas 属性里定义好的区域名称。
也可以用 grid-row-start / grid-column-start / grid-row-end / grid-column-end 这种简写方式。

justify-self：  单独设置某个项目在单元格内的水平对齐方式 (沿着行轴),  会覆盖 justify-items 的设置

• start: 左对齐。
• end: 右对齐。
• center: 居中对齐。
• stretch: 拉伸填满整个单元格宽度

align-self： 单独设置某个项目在单元格内的垂直对齐方式（沿着列轴）,  会覆盖 align-items 的设置

• start: 上对齐。
• end: 下对齐。
• center: 居中对齐。
• stretch: 拉伸填满整个单元格高度

place-self:  align-self 和 justify-self 的简写 ：place-self: <align-self> <justify-self>

Grid应用

//基础网格布局
<div class="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>

//css 
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列，每列宽度一样 */
  grid-template-rows: 100px 100px; /* 两行，每行高 100px */
  gap: 10px; /* 行列间距 10px */
}

//杂志风格
//grid-template-areas 来布局
<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <article>Content</article>
  <footer>Footer</footer>
</div>

//css
.container {
display: grid;
grid-template-columns: 1fr 3fr; /* 侧边栏占 1/4，内容区占 3/4 */
grid-template-rows: 100px1fr 50px; /* header 100px, footer 50px, content 高度自适应 */
grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
gap: 20px;
height: 100vh; /* 占满屏幕高度 */
}

header { grid-area: header; }
aside { grid-area: sidebar; }
article { grid-area: content; }
footer { grid-area: footer; }

//响应式卡片布局
<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

//css 
.container {
  display: grid;
 /* 自动填充，每张卡片最小 250px 宽，最大 1fr */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.card{
    border: 1px solid black;
}

//auto-fit 或 auto-fill 关键字可以让 Grid 布局自动适应容器宽度，实现响应式的列数变化。

好了希望这篇文章能对你有所帮助。