【前端基础】15.grid布局

menghen113

已于 2022-09-18 20:42:00 修改

阅读量309

点赞数 1

分类专栏：前端学习文章标签：前端 javascript css

于 2022-09-18 20:36:24 首次发布

本文链接：https://blog.csdn.net/menghen113/article/details/126922681

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频

1.什么是Grid布局

Grid布局即网格布局,是一种新的css模型，
一般是将一个页面划分成几个主要的区域，
定义这些区域的大小、位置和层次等关系，
是目前唯一一种css二维布局。

2.和flex布局的区别

Grid布局和flex布局是有实质性的区别的，
flex是一维布局，只能处理一个维度上的布局，
一行或者是一列。但是Grid布局是二维布局，
将容器划分成了“行”和“列”，产生了一个个的网格，
可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。

3.实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="./lib-flexible-2.0/lib-flexible-2.0/index.min.js"></script>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
   
</head>
<body>
    <body>
        <div class="main">
            <div class="item">
                <div class="left">
                    <img src="./运行.png" alt="">
                </div>
                <div class="middle">
                    <div class="middleTop">Interesting Good Family</div>
                    <div class="middleBottom">Wireframe</div>
                </div>
                <div class="right">21:00</div>
            </div>
        </div>

    </body>
</body>
</html>

html,body{
    margin: 0;
}
.main{
    width: 100%;
    box-sizing: border-box;
    padding:0.72rem;
}
.item{
    width: 100%;
    height: 2.5333rem;
    /* background-color: wheat; */
    display: grid;
    grid-template-columns: 0.4133rem auto 0.8667rem;
    align-items: center;
    border-bottom: 0.9975px solid #ccc;
}
.left img{
    width: 100%;
}
.right{
    font-size: 0.36rem;
    font-family: SF Pro Text;
    font-weight: 400;
    color: rgba(123, 122, 124,1);

}

.middleTop{
    font-size: 0.3867rem;
    font-family: SF Pro Text;
    font-weight: 600;
    color: rgba(55,53,57,1);
}
.middleBottom{
    font-size: 0.36rem;
    font-family: SF Pro Text;
    font-weight: 400;
    color: rgba(123,122,124,1);
}
.middle{
    padding-left: 0.8rem;
    display: grid;
    grid-template-rows:0.5067rem 0.48rem;
    row-gap: 0.0667rem;
}