CSS进阶-第五篇：深入 CSS 布局-Grid 布局（一）：基础概念与创建

CSS进阶-第五篇：深入 CSS 布局-Grid 布局（一）：基础概念与创建

在现代网页设计中，CSS Grid 布局为开发者提供了一种强大且灵活的方式来创建复杂的页面布局。本文将深入探讨 Grid 布局的基础概念，并介绍如何创建网格容器。

1. Grid 布局模型概览

核心概念详解

• 网格容器（Grid Container）：应用了 display: grid 或 display: inline-grid 属性的 HTML 元素就是网格容器。它是整个网格布局的基础框架，所有的网格项目（子元素）都在这个容器内进行排列和定位。例如，我们可以将一个 div 元素设置为网格容器：

.grid-container {
   
   
    display: grid;
}