第 15 讲：CSS 网格 – 轻松构建复杂布局

在本次讲座中，我们将深入探讨CSS Grid，这是一个强大的布局系统，可以让您完全控制行和列。虽然 Flexbox 非常适合一维布局（行或列），但 Grid 允许您处理二维布局，这意味着您可以精确地设计整个网页布局。

1.什么是 CSS 网格？

CSS 网格布局，俗称Grid，是一种 2D 布局系统，旨在同时管理行和列。您可以将其视为一个矩阵或电子表格，其中每个元素都放置在网格单元中，从而实现干净且有组织的布局。

2.如何创建网格

要开始使用网格，您需要通过设置 display: grid 将容器定义为网格。然后，您将使用 grid-template-rows 和 grid-template-columns 属性定义行数和列数。

例子：

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

这将创建一个 2x2 网格，每个单元格为 100px x 100px，单元格之间有 10px 间隙。

3.定义网格区域

您还可以使用 grid-area 属性为要占用的项目定义特定的网格区域。这使您可以准确控制项目在网格中的放置位置。

例子：

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

此示例创建一个基本布局，其中页眉和页脚跨越两列，侧边栏和主要内容占据各自的列。 grid-template-areas 属性允许您定义网格的结构以及每个区域的名称。

4.响应式网格的自动调整和自动填充

CSS 网格最好的部分之一是它很容易使其响应。自动调整和自动填充属性可以根据可用空间自动调整列数。

例子：

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

在此示例中，网格将自动创建适合容器内的尽可能多的列，每列至少 150px 宽。如果有额外的空间，列将拉伸以填充剩余区域。

5.网格对齐

您可以使用 justify-items 和 align-items.

• justify-items：在网格单元内水平对齐项目。
• align-items：在网格单元内垂直对齐项目。

例子：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

这将使所有项目在其网格单元内水平和垂直居中。

6。嵌套网格

CSS Grid 还支持嵌套网格，允许您在网格项内创建网格以实现更复杂的布局。

例子：

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

在此示例中，其中一个网格项包含嵌套网格，允许更灵活和详细的布局。

7.网格与 Flexbox：何时使用每个

• 当您需要管理一个方向（行或列）的项目布局时，请使用 Flexbox。
• 当您需要同时管理行和列以实现复杂的多维布局时，请使用网格。

结论

CSS 网格是网页设计的游戏规则改变者，提供了一种强大的方法来以最少的努力构建复杂且响应式的布局。无论您正在处理博客布局、仪表板还是网站结构，网格都可以让您灵活地轻松控制行和列。

在 LinkedIn 上关注我

里多伊·哈桑