简单了解grid布局

最新推荐文章于 2024-05-20 21:21:56 发布

十八-

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量128

点赞数

分类专栏：笔记文章标签： html5 css

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

版权

笔记专栏收录该内容

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;
}

效果图

在这里插入图片描述

十八-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单了解grid布局

grid布局CSS Grid 布局是 Web 的第一个真正的布局系统，它的目的是将内容组织成行列的形式，最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。简单做个demohtml部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>grid布局</title> <link rel="stylesheet"
复制链接

扫一扫