作者 | 杨小二

前言

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

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

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

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

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

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

实例效果

PC端预览的效果：

移动端的效果：

要点解析

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

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

案例代码

HTML代码：

CSS代码：

.image-mosaic {  display: grid;  gap: 1rem;  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  grid-auto-rows: 240px;}    .card {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  background: #353535;  font-size: 3rem;  color: #fff;  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;  height: 100%;  width: 100%;  border-radius: 4px;  transition: all 500ms;  overflow: hidden;  background-size: cover;  background-position: center;  background-repeat: no-repeat;  padding: 0;  margin: 0;}@media screen and (min-width: 600px) {  .card-tall {    grid-row: span 2 / auto;  }  .card-wide {    grid-column: span 2 / auto;  }}

完整代码：

这个案例，到这里就完成了，如果你还不会的话，可以自行多练习一下。

写在最后

CSS Grid布局，在前端技术领域也是非常重要的一块内容，如果你还不是很了解的话，可以再去做一些深入的学习。

在此，感谢你的阅读。我是杨小二，我们下次再见。

学习更多技能

请点击下方公众号