网格布局案例

最新推荐文章于 2024-08-28 09:57:53 发布

风继续吹&

最新推荐文章于 2024-08-28 09:57:53 发布

阅读量254

点赞数

分类专栏： vue.js 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_48930299/article/details/120119484

版权

这篇博客详细介绍了如何使用CSS的grid布局来创建网页布局。首先，讲述了如何为大盒子设置display:grid属性，然后通过两个具体案例展示了grid布局的实用性和灵活性。

摘要由CSDN通过智能技术生成

在这里插入图片描述

1.为大盒子添加display:grid样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
   
            width: 500px;
            height: 400px;
            /* background-color: #ccc; */
            display: grid;
            /* 每一列 */
            /* grid-template-columns: 200px 100px 200px; */
            /* 每一行 */
            /* grid-template-rows: 100px 200px 100px; */

            /* 等分的方块 */
            /* grid-template-columns: 1fr 1fr 1fr; */
            /* grid-template-rows: 1fr 1fr 1fr; */

            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: (3, 1fr);

            /* 设置间距 */
            /* grid-column-gap:5px;
            grid-row-gap: 5px; */

            /* grid-gap: 20px; */
            /* 行间隔  列间隔 */
            grid-gap: 20px 10px;


            /* 对齐方式水平方向 */
            /* 拉伸 */
            /* justify-items: stretch; */
            /* 左对齐 */
            /* justify-items: start; */
            /* 剧中 */
            /* justify-items:center; */
            /* 右对齐 */
            /* justify-items:end; */


            /* 垂直对齐方式 */
            /* align-items: stretch; */
            /* justify-items: start; */
            /* justify-items: center; */
            /* justify-items: end; */

            /* 对齐方式简写 */
            /* place-items: center; */
            /* 纵向  横向 */
            place-items: start center;
        }

        a {
   
            background-color: blue;
            text-decoration: none;

        }

        .box a:nth-child(even) {
   
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#">111</a>
        <a href="#">222</a>
        <a href=