css grid布局demo详解

CSS Grid布局详解

最新推荐文章于 2025-07-24 15:12:18 发布

原创最新推荐文章于 2025-07-24 15:12:18 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gird

前端学习笔记专栏收录该内容

276 篇文章

订阅专栏

本文详细介绍了CSS Grid布局的基础用法，包括如何定义网格轨道的行和列，以及如何使用grid-row和grid-column属性来精确控制网格中每个子元素的位置。

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grid-1 {
            display: grid;
            grid-template-columns: 150px 20px 150px 20px 150px;
            grid-template-rows: 40px 20px auto 20px auto;
        }
        .grid-1 div {
            background: pink;
        }
        .item1 {
            grid-row: 1;
            grid-column: 1;
        }
        .item2 {
            grid-row: 1;
            grid-column: 3;
        }
        .item3 {
            grid-row: 1;
            grid-column: 5;
        }
        .item4 {
            grid-row: 3;
            grid-column: 1;
        }
        .item5 {
            grid-row: 3;
            grid-column: 3;
        }
        .item6 {
            grid-row: 3;
            grid-column: 5;
        }
        .item7{
            grid-row: 5;
            grid-column: 1;
        }
        .item8 {
            grid-row: 5;
            grid-column: 3;
        }
        .item9 {
            grid-row: 5;
            grid-column: 5;
        }

    </style>
</head>
<body>
    <section class="grid-1">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>
    </section>
</body>
</html>