2分钟让你搞懂 grid-template-areas

上面的效果怎么样通过grid实现呢？话不多说上代码

<!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>
</head>
<style>.container {display: grid;width: calc(5 * 60px);height: calc(5 * 60px);padding: 60px;grid-template-rows: repeat(5, 60px);grid-template-columns: repeat(5, 60px);grid-template-areas: ".  red  red  red  . ""yellow .  .  .  . ""green  .  black  black  . ""green  .  .  .  blue "".  pink pink pink . ";}.red {grid-area: red;background: red;}.yellow {grid-area: yellow;background: yellow;}.green {grid-area: green;background: green;}.pink {grid-area: pink;background: pink;}.blue {grid-area: blue;background: blue;}.black {grid-area: black;background: black;}
</style><body><div class="container"><div class="red"></div><div class="yellow"></div><div class="green"></div><div class="pink"></div><div class="blue"></div><div class="black"></div></div>
</body></html>

2分钟让你搞懂 grid-template-areas相关推荐

五分钟学会python函数_五分钟带你搞懂python 迭代器与生成器
前言大家周末好,今天给大家带来的是Python当中生成器和迭代器的使用. 我当初第一次学到迭代器和生成器的时候,并没有太在意,只是觉得这是一种新的获取数据的方法.对于获取数据的方法而言,我们会一种就 ...
别再说不了解非接触液位传感器了?只需三分钟就能搞懂
非接触式液位传感器,顾名思义就是不用接触物体就能进行监测,从而避免遭到被监测物体的腐蚀等.那关于非接触式液位传感器,大家了解多少呢?今天TCOOP就来给大家详细介绍下,三分钟就能搞懂,快来看看吧! 一 ...
20分钟教你搞懂Git！
Git 是最流行的版本管理工具,也是程序员必备的技能之一.本文就来教你 20 分钟搞懂 Git! 以下为译文: 尽管每天你都会用到Git,但也有可能搞不懂它的工作原理.为什么Git可以管理版本?基本命 ...
20 分钟教你搞懂 Git！
Git 是最流行的版本管理工具,也是程序员必备的技能之一.本文就来教你 20 分钟搞懂 Git! 以下为译文: 尽管每天你都会用到Git,但也有可能搞不懂它的工作原理.为什么Git可以管理版本?基本命 ...
5分钟包你搞懂箱形图分析！
最近有很多用户说到了年终需要回顾这一年的工作,根据这一年的数据看看有没有异常的情况,那么哪种图能够清晰直观地展现出这一信息呢? 答案只有一个,那就是... 箱形图箱形图(英文:Box plot),又 ...
五分钟让你搞懂什么是“构造方法”
构造方法的形式:类名([参数列表]){} 特点:- 构造方法没有返回值,就算void也不能有,这点与Java方法(或叫函数)不一样:- 一个类中默认无参构造方法,但是当定义了一个有参构造方法时,则默认 ...
好文推荐，15 分钟教你搞懂 Git！
点击上方"方志朋",选择"置顶或者星标" 你的关注意义重大! 译者丨Alex https://www.tutorialdocs.com/article/how- ...
一文搞懂Grid 布局
Grid 布局是什么? Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系.号称是最强大的的 CSS 布局方案,是目 ...
三分钟带您搞懂代理模式
全文共1439字,预计阅读时间:10分钟定义: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 代理模式是一种比较贴近于生活的设计模式,现实生活中也有很多代理模式的例子: ...

2分钟让你搞懂 grid-template-areas

2分钟让你搞懂 grid-template-areas相关推荐

最新文章

热门文章