任务目标
- 利用grid布局实现响应式图片网格,如下图:
核心概念
fr
:CSS Grid 带来的一个全新值,称为等分单位 。它允许将容器可用空间分成想要的多个等分空间repeat()
函数:grid布局中指定列和行更强大的方法auto-git
:列数自适应minmax()
函数:定义网格项目的宽度范围
实现代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA