【前端基础】15.grid布局_app

视频

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>Documenttitle>
   
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 Familydiv>
                    <div class="middleBottom">Wireframediv>
                div>
                <div class="right">21:00div>
            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;
}

效果图：

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/2990132.html

【前端基础】15.grid布局

发表评论

评论列表（0条）