css的grid布局（css+div布局精讲）

简介

CSS Grid布局是一种强大的布局系统，允许您灵活地控制Web元素的布局。它通过将容器划分为称为网格的行的和列的系统来工作。然后，您可以将元素放置在网格中，并使用各种属性控制其大小、位置和对齐方式。

多级标题

网格创建

要创建一个网格，您可以使用`display: grid;`属性。这将把容器转换为网格容器。然后，您可以使用`grid-template-columns`和`grid-template-rows`属性来定义网格的列和行。例如，以下代码创建一个包含三列和两行的网格：```css .grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr); } ```

元素放置

要将元素放置在网格中，您可以使用`grid-column`和`grid-row`属性。这些属性指定元素在网格中的哪一列和哪一行。例如，以下代码将一个元素放置在第二列的第一行：```css .element {grid-column: 2;grid-row: 1; } ```

大小和对齐

您可以使用`grid-column-start`、`grid-column-end`、`grid-row-start`和`grid-row-end`属性来控制元素在网格中的大小和位置。这些属性指定元素在网格中开始和结束的列和行。例如，以下代码使一个元素跨越第二列和第三列，并从第一行到第二行：```css .element {grid-column-start: 2;grid-column-end: 3;grid-row-start: 1;grid-row-end: 3; } ```您还可以使用`justify-self`和`align-self`属性来控制元素在网格中的对齐方式。这些属性指定元素在水平和垂直方向上的对齐方式。例如，以下代码将一个元素水平居中并垂直靠下对齐：```css .element {justify-self: center;align-self: end; } ```

嵌套网格

您可以将网格嵌套在其他网格中，以创建更复杂的布局。这允许您在单个布局中创建不同的网格区域。例如，以下代码在父网格中创建两个子网格：```css .parent-grid {display: grid;grid-template-columns: repeat(2, 1fr); }.child-grid-1, .child-grid-2 {display: grid;grid-template-columns: repeat(2, 1fr); } ```

优点

CSS Grid布局有许多优点，包括：

灵活性：

它允许您创建各种自定义布局。

响应能力：

它对不同屏幕尺寸具有响应能力。

易于使用：

语法简单易懂。

浏览器支持：

它得到所有主要浏览器广泛支持。

示例

以下是一个使用CSS Grid布局创建的基本网格示例：```html

``````css .grid-container {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);gap: 1em; }.item1 {grid-column: 1;grid-row: 1; }.item2 {grid-column: 2;grid-row: 1; }.item3 {grid-column: 1;grid-row: 2; }.item4 {grid-column: 2;grid-row: 2; } ```这将创建一个两列两行的网格，其中项目1和3位于第一行，项目2和4位于第二行。项目之间有1em的间隔。