简述flex grid

目录

• 概述
• 实用

内容

概述

CSS Grid 是一种用于布局网页的 CSS 模块，它提供了一种二维网格布局的方式，可以更加灵活地控制网页的布局。CSS Grid 可以将网页分成行和列，并将网页中的元素放置在这些行和列中，从而实现复杂的布局效果。

CSS Grid 的主要特点包括：

• 二维布局：CSS Grid 可以同时控制网页的行和列，从而实现更加灵活的布局效果。

• 自适应布局：CSS Grid 可以根据网页的大小和设备的屏幕大小自适应调整布局效果。

• 网格线：CSS Grid 可以通过网格线来定义网页的行和列，从而更加精确地控制布局效果。

• 网格单元格：CSS Grid 可以将网页中的元素放置在网格单元格中，从而实现更加复杂的布局效果。

• 响应式布局：CSS Grid 可以根据不同的设备和屏

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

实用

一个简单的 CSS Grid 使用教学：

创建网格容器

首先，需要创建一个网格容器，可以使用 display: grid 属性来创建。例如：

.container {
  display: grid;
}

定义网格行和列

使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。例如：

.container {
  display: grid;
  grid-template-rows: 100px 200px 300px;
  grid-template-columns: 1fr 2fr 1fr;
}

这个例子定义了三行和三列的网格，第一行高度为 100 像素，第二行高度为 200 像素，第三行高度为 300 像素，第一列和第三列的宽度为网格容器宽度的 1/3，第二列的宽度为网格容器宽度的 2/3。

放置网格元素

使用 grid-row 和 grid-column 属性来放置网格元素。例如这个例子将一个元素放置在第一行和第二列：

.item {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}