CSS Grid Layout网格布局

最新推荐文章于 2025-03-24 10:35:18 发布

一个小切图仔

最新推荐文章于 2025-03-24 10:35:18 发布

阅读量202

点赞数

分类专栏： css 文章标签： css html

原文链接：https://www.w3cplus.com/css3/css-grid-layout-using-grid-areas.html

版权

css 专栏收录该内容

1 篇文章

订阅专栏

                    
                        
                    
                    将元素设置为网格容器display: grid;
 
定义行和列（2x4）grid-template-rows: 300px 300px;
grid-template-columns: 1fr 1fr 1fr 1fr;
 fr：列宽的单位i，意思是可用空间的部分，与Flexbox中的扩展系数（flex-grow）相似，即网格轨道确定尺寸后的剩余空间。
 指定行和列的数量及大小时，可以混用不同的长度单位。/**
靠两边的两列宽度固定为200像素，第二列的宽度是总空间的20%，第三列则占据剩余的全部空间。
*/
grid-template-columns:200px 20% 1fr 200px;
 使用repeat函数指定重复的行或列声明grid-template-columns: repeat(5,1fr);
 使用minmax函数/**
最后两行至少4em高，除此之外还要占据相等的可用空间。
*/
grid-template-rows: auto minmax(4em, 1fr) minmax(4em, 1fr);
 
添加网格项<!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>
        .grid-1 {
            display: grid;
            width: 100%;
            max-width: 750px;
            margin: 0 auto;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }
        .item-1 {
            background: #899930;
            grid-column: 1 / 3;
            grid-row: 1;
            /* 或者 grid-area: 1/1/2/3; */
            /* 又或者使用span 
            grid-column: 1 / span 2;
        	grid-row: 1 / span 1; */
        }
    </style>
</head>
<body>
    <section class="grid-1">
        <div class="item-1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
    </section>
</body>
</html>
 
 参考内容：《精通css高级web解决方案》、w3cplus

                