Grid布局入门

最新推荐文章于 2024-05-28 09:38:04 发布

前端imber

最新推荐文章于 2024-05-28 09:38:04 发布

阅读量446

点赞数

分类专栏： CSS3 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/imber___zsk/article/details/122172556

版权

CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考：最强大的 CSS 布局 —— 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>
        .one {
            background: #19CAAD;
        }

        .two {
            background: #8CC7B5;
        }

        .three {
            background: #D1BA74;
        }

        .four {
            background: #BEE7E9;
        }

        .five {
            background: #E6CEAC;
        }

        .six {
            background: #ECAD9E;
        }

        .item {
            text-align: center;
            font-size: 200%;
            color: #fff;
        }

        /* repeat 重复 */
        .wrapper1 {
            margin: 60px;
            /* 声明一个容器 */
            display: grid;
            /*  声明列的宽度  */
            grid-template-columns: repeat(3, 200px);
            /* grid-template-columns: 100px 100px 100px; */
            /*  声明行间距和列间距  */
            grid-gap: 20px;
            /*  声明行的高度  */
            grid-template-rows: 100px 200px;
        }

        /* auto-fill,尽可能容纳更多单元格 */
        .wrapper-2 {
            display: grid;
            grid-template-columns: repeat(auto-fill, 200px);
            grid-gap: 5px;
            grid-auto-rows: 50px;
        }

        /* fr表示多少等份 */
        .wrapper-3 {
            display: grid;
            grid-template-columns: 200px 1fr 2fr;
            grid-gap: 5px;
            grid-auto-rows: 50px;
        }

        /* 
        minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。
        它接受两个参数，分别为最小值和最大值。
        grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。
        */
        .wrapper-4 {
            display: grid;
            grid-template-columns: 1fr 1fr minmax(300px, 2fr);
            grid-gap: 5px;
            grid-auto-rows: 50px;
        }

        /* 
        auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。
        grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度 
        */
        .wrapper-5 {
            display: grid;
            grid-template-columns: 100px auto 100px;
            grid-gap: 5px;
            grid-auto-rows: 50px;
        }

        /*
        grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性
        grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性演示地址
        grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。
        grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的 
        */
        .wrapper6 {
            display: grid;
            grid-template-columns: 200px 100px 100px;
            grid-gap: 10px 20px;
            grid-auto-rows: 50px;
        }

        .wrapper-7 {
            display: grid;
            grid-template-columns: 200px 100px 100px;
            grid-auto-rows: 50px;
            grid-row-gap: 10px;
            grid-column-gap: 20px;
        }

        /*  
        grid-template-areas 属性
        grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成
        一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。
        grid-area 属性指定项目放在哪一个区域 
        */
        .wrapper8 {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: 120px 120px 120px;
            grid-template-areas:
                ". header  header"
                "sidebar content content";
            background-color: #fff;
            color: #444;
        }

        /* 复制代码上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。 */
        .sidebar {
            grid-area: sidebar;
        }

        .content {
            grid-area: content;
        }

        .header {
            grid-area: header;
        }

        /* 以上代码表示将类 .sidebar .content .header所在的元素放在上面 grid-template-areas 中定义的 sidebar content header 区域中 */

        .wrapper {
            display: grid;
            grid-template-columns: 200px 100px;
            /*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
            grid-template-rows: 100px 100px;
            grid-gap: 10px 20px;
            grid-auto-rows: 50px;
        }
    </style>
</head>

<body>
    <div class="wrapper-5">
        <div class="one item">One</div>
        <div class="two item">Two</div>
        <div class="three item">Three</div>
        <div class="four item">Four</div>
        <div class="five item">Five</div>
        <div class="six item">Six</div>
    </div>

    <div class="wrapper">
        <div class="box header">Header</div>
        <div class="box sidebar">Sidebar</div>
        <div class="box content">Content</div>
    </div>
    <style>
        .sidebar {
            grid-area: sidebar;
        }

        .content {
            grid-area: content;
        }

        .header {
            grid-area: header;
        }


        .wrapper {
            margin: 50px;
            display: grid;
            grid-gap: 10px;
            grid-template-columns: 120px 120px 120px;
            grid-template-areas:
                ". header  header"
                "sidebar content content";
            background-color: #fff;
            color: #444;
        }

        .box {
            background-color: #444;
            color: #fff;
            border-radius: 5px;
            padding: 20px;
            font-size: 150%;
        }

        .header {
            background-color: #999;
        }
    </style>
</body>

</html>

前端imber

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Grid布局入门

参考：最强大的 CSS 布局 —— 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.
复制链接

扫一扫

专栏目录