【5分钟代码练习】02—用CSS Grid实现响应式图片布局的效果

作者 | 杨小二

前言

你的想法会影响你的行动，你的行动会影响你的最终结果。如果你的想法总是不对，就会很难取得好的结果。比方很多人对于专业技能的学习，总是急于求成，想花几个月时间，就想达到别人五年十年的专业水平，而不明白，学习其实是一个需要时间，慢慢积累，循循渐进的过程。

而还有的人对于学习，总想着等到自己什么都学会了，或者自我感觉不错了，才会去行动，去进行实战练习，其实，这个也是不友好的一种学习方式，因为它容易导致学习效率低。

因此，我们在学习编程的过程中，我们不需要把所有知识都掌握了才开始去写代码，而是一边学习理论知识，一边敲代码。

这样我们会更清楚自己的学习情况，知道问题在那里，这样才能及时调整学习方法。

所以，从今天开始，敲下你的第一行代码。

从今天开始，每天坚持学习5分钟，实现一个简单的效果。

实例效果

PC端预览的效果：

移动端的效果：

要点解析

• 采用display: grid创建一个合适的响应网格布局。

• 将样式包装到媒体查询中，以适应于小尺寸屏幕。

案例代码

HTML代码：

<div class="image-mosaic">
  <div class="card card-tall card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/gksj-09.jpg')">
  </div>
  <div class="card card-tall" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e1edfa3a0786f4df7c442a1895522109.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e2ab18d0d9ef27d2e2f6f589c501e25b.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/1755875dfb05ec8dc263be2f56d124e5.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/859ecf02e0f70819ba71d5fee8f72f12.jpg')">
  </div>
  <div class="card" style="background-image: url('http: