参考资料

  1. 哪种布局方式更适合移动端？
  2. Flexbox布局有哪些常见的误区？
  3. 有没有现成的Vanta.js与CSS过渡模板？
  4. 如何避免 CSS 过渡动画卡顿？
  5. css如何居中一个div
  6. css3阴影效果
  7. 多重选择器详细说明以及案例
  8. display: flex/inline-flex示例

CSS网格详细说明

CSS Grid Layout（网格布局）是CSS中用于创建复杂布局的强大工具。它允许开发者将网页划分为行和列，形成一个二维网格系统，从而精确控制元素的位置和大小。

主要概念：

  1. 网格容器（Grid Container）：应用display: grid或display: inline-grid的元素，成为网格容器。

  2. 网格项（Grid Item）：网格容器的直接子元素，称为网格项。

  3. 网格线（Grid Line）：网格的行和列之间的分界线，可以是水平或垂直的。

  4. 网格轨道（Grid Track）：相邻两条网格线之间的空间，可以是行或列。

  5. 网格单元格（Grid Cell）：相邻两条行线和列线之间的最小单位。

  6. 网格区域（Grid Area）：由四条网格线包围的矩形区域，可以包含一个或多个网格单元格。

常用属性：

  1. 容器属性：

    • display: 设置为grid或inline-grid。

    • grid-template-columns / grid-template-rows: 定义列和行的大小。

    • grid-template-areas: 定义网格区域的名称。

    • grid-gap: 定义行和列之间的间距。

    • justify-items / align-items: 控制网格项在单元格内的对齐方式。

    • justify-content / align-content: 控制整个网格在容器中的对齐方式。

    • grid-auto-columns / grid-auto-rows: 定义隐式轨道的大小。

    • grid-auto-flow: 控制自动放置的网格项的流向。

  2. 项属性：

    • grid-column-start / grid-column-end: 定义网格项在列上的位置。

    • grid-row-start / grid-row-end: 定义网格项在行上的位置。

    • grid-area: 指定网格项放置在哪个网格区域。

    • justify-self / align-self: 控制单个网格项在单元格内的对齐方式。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: lightblue;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 100px;
        }
        .item1 {
            grid-column: 1 / 3;
        }
        .item2 {
            grid-row: 2 / 4;
        }
        .item3 {
            grid-area: 2 / 2 / 4 / 4;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

解释：

  • .grid-container定义了一个3x3的网格，每行每列大小为100px，间距为10px。

  • .item1跨越前两列。

  • .item2跨越第二行到第四行。

  • .item3从第二行第二列开始，跨越到第四行第四列。

通过CSS Grid，开发者可以轻松实现复杂的布局设计。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。