简单了解grid布局

最新推荐文章于 2024-11-04 09:01:49 发布

十八-

最新推荐文章于 2024-11-04 09:01:49 发布

阅读量144

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Wantedop/article/details/111193696

版权

CSS Grid 布局网页设计行列前端开发

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

grid布局

CSS Grid 布局是 Web 的第一个真正的布局系统，它的目的是将内容组织成行列的形式，最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。

简单做个demo

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrapper'>
    <div class='letter'>
        A
    </div>
    <div class='letter'>
        B
    </div>
    <div class='letter'>
        C
    </div>
    <div class='letter'>
        D
    </div>
</div>
</body>
</html>

css部分

body,html {
    padding: 0;
    margin: 0;
}
.wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    grid-template-rows: 1fr 3fr;
}
.letter {
    background-color: #0069b3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-size: 70px;
    color: white;
    line-height: 1;
    font-family: 'hobeaux-rococeaux-background', Helvetica;
    font-weight: 200;
    cursor: pointer;
    transition: all .3s ease;
}