CSS教程
CSS进阶

什么是CSS网格?

网格可以定义为垂直线和水平线的交集。 CSS网格布局将页面分为主要部分。 Grid属性提供了具有行和列的基于网格的布局系统。它使网页的设计变得容易,而无需定位和浮动。网格布局为我们提供了一种创建以 CSS 而不是 HTML
类似于表,它使用户可以将元素按行和列对齐。但是与表格相比,使用CSS网格可以轻松设计布局。我们可以使用 grid-template-rows grid-template-columns 属性定义网格上的列和行。
网格容器可以是通过在元素上声明 display:grid display:inline-grid 创建。网格容器包含放置在行和列内的网格项目。

网格

让我们通过一个示例来理解CSS中的网格。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .main {
            display: grid;
            grid: auto auto / auto auto auto auto;
            grid-gap: 10px;
            background-color: blue;
            padding: 10px;
        }
        .num {
            background-color: lightblue;
            text-align: center;
            color: black;
            padding: 10px 10px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="num">One</div>
        <div class="num">Two</div>
        <div class="num">Three</div>
        <div class="num">Four</div>
        <div class="num">Five</div>
        <div class="num">Six</div>
        <div class="num">Seven</div>
        <div class="num">Eight</div>
    </div>
</body>
</html>
输出
什么是CSS网格
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4