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

共 10016字,需浏览 21分钟

 ·

2021-07-05 02:16

作者 | 杨小二


前言

你的想法会影响你的行动,你的行动会影响你的最终结果。如果你的想法总是不对,就会很难取得好的结果。比方很多人对于专业技能的学习,总是急于求成,想花几个月时间,就想达到别人五年十年的专业水平,而不明白,学习其实是一个需要时间,慢慢积累,循循渐进的过程。
而还有的人对于学习,总想着等到自己什么都学会了,或者自我感觉不错了,才会去行动,去进行实战练习,其实,这个也是不友好的一种学习方式,因为它容易导致学习效率低。
因此,我们在学习编程的过程中,我们不需要把所有知识都掌握了才开始去写代码,而是一边学习理论知识,一边敲代码。
这样我们会更清楚自己的学习情况,知道问题在那里,这样才能及时调整学习方法。
所以,从今天开始,敲下你的第一行代码。
从今天开始,每天坚持学习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://www.webqdkf.com/d/file/p/2021/02-11/21903f3245940092303fd5a519f813a2.jpg')">  </div>  <div class="card card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/banner03-873-390.jpg')">  </div>  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">  </div>  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">  </div>   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">   </div>  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/e973c393fd7fda278977fb2ff686fdc9.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/52d11e4aef71cdb14d95cded9ffc3bf8.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/08-31/a03f0b9879a5361ba0a5519cbe1dbac1.jpg')">  </div>  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-16/5ac65c5c5d7ead056d8ac2767b5648e1.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/b45e91e2b7c53f658f85f9d76f89aa77.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-08/186d506c004efa7896fa634e5139b6dc.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/f731e58e9bf7ee4c5b5b2a85e5dd2cbf.jpg')">  </div>   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/09-11/c0f179887b1f9efa98c4af944e8d699b.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/ede4d9983eefd8f88bf03eb966bceb5c.jpg')">  </div>  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/2383cd70ff6d2f15350d64b0af572821.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-24/1442b8adc1f03141eb66e844e069caa8.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">  </div>  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">  </div></div>
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; }}
完整代码:
<html><head>   <style type="text/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; }}</style></head><body> <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://www.webqdkf.com/d/file/p/2021/02-11/21903f3245940092303fd5a519f813a2.jpg')">  </div>  <div class="card card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/banner03-873-390.jpg')">  </div>  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">  </div>  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">  </div>   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">   </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/e973c393fd7fda278977fb2ff686fdc9.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/52d11e4aef71cdb14d95cded9ffc3bf8.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/08-31/a03f0b9879a5361ba0a5519cbe1dbac1.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-16/5ac65c5c5d7ead056d8ac2767b5648e1.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/b45e91e2b7c53f658f85f9d76f89aa77.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-08/186d506c004efa7896fa634e5139b6dc.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/f731e58e9bf7ee4c5b5b2a85e5dd2cbf.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/09-11/c0f179887b1f9efa98c4af944e8d699b.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/ede4d9983eefd8f88bf03eb966bceb5c.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/2383cd70ff6d2f15350d64b0af572821.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-24/1442b8adc1f03141eb66e844e069caa8.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')"> </div> <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')"> </div></div></body></html>
这个案例,到这里就完成了,如果你还不会的话,可以自行多练习一下。

写在最后

CSS Grid布局,在前端技术领域也是非常重要的一块内容,如果你还不是很了解的话,可以再去做一些深入的学习。
在此,感谢你的阅读。我是杨小二,我们下次再见。

学习更多技能

请点击下方公众号




浏览 47
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐