常见css布局

最新推荐文章于 2024-09-06 09:38:49 发布

爱问问题的小李

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量327

点赞数 3

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_43913004/article/details/141200286

版权

布局

九宫格grid布局
九宫格flex布局

九宫格grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格布局示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
            width: 300px; /* 设置容器宽度 */
            height: 300px; /* 设置容器高度 */
            margin: 0 auto; /* 让容器居中 */
            padding: 20px;
            box-sizing: border-box;
        }

        .grid-item {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item"></div> <!-- 空白项 -->
        <div class="grid-item"></div> <!-- 空白项 -->
        <div class="grid-item"></div> <!-- 空白项 -->
    </div>
</body>
</html>

九宫格flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格布局</title>
    <style>
        .grid-container {
            display: flex;
            flex-wrap: wrap;
            width: 300px; /* 设置容器宽度 */
            height: 300px; /* 设置容器高度 */
            gap: 10px; /* 设置项之间的间距 */
        }

        .grid-item {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border: 1px solid #ccc;
            width: calc(33.33% - 10px); /* 三列布局，减去间距 */
            height: calc(33.33% - 10px); /* 三行布局，减去间距 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item"></div> <!-- 空白项 -->
        <div class="grid-item"></div> <!-- 空白项 -->
        <div class="grid-item"></div> <!-- 空白项 -->
    </div>
</body>
</html>