CSS进阶-第五篇:深入 CSS 布局-Grid 布局(一):基础概念与创建
在现代网页设计中,CSS Grid 布局为开发者提供了一种强大且灵活的方式来创建复杂的页面布局。本文将深入探讨 Grid 布局的基础概念,并介绍如何创建网格容器。
1. Grid 布局模型概览
核心概念详解
- 网格容器(Grid Container):应用了
display: grid
或display: inline-grid
属性的 HTML 元素就是网格容器。它是整个网格布局的基础框架,所有的网格项目(子元素)都在这个容器内进行排列和定位。例如,我们可以将一个div
元素设置为网格容器:
.grid-container {
display: grid