作者 | 楊小二

前言

你的想法會影響你的行動，你的行動會影響你的最終結(jié)果。如果你的想法總是不對，就會很難取得好的結(jié)果。比方很多人對于專業(yè)技能的學習，總是急于求成，想花幾個月時間，就想達到別人五年十年的專業(yè)水平，而不明白，學習其實是一個需要時間，慢慢積累，循循漸進的過程。

而還有的人對于學習，總想著等到自己什么都學會了，或者自我感覺不錯了，才會去行動，去進行實戰(zhàn)練習，其實，這個也是不友好的一種學習方式，因為它容易導致學習效率低。

因此，我們在學習編程的過程中，我們不需要把所有知識都掌握了才開始去寫代碼，而是一邊學習理論知識，一邊敲代碼。

這樣我們會更清楚自己的學習情況，知道問題在那里，這樣才能及時調(diào)整學習方法。

所以，從今天開始，敲下你的第一行代碼。

從今天開始，每天堅持學習5分鐘，實現(xiàn)一個簡單的效果。

實例效果

PC端預覽的效果：

移動端的效果：

要點解析

采用display: grid創(chuàng)建一個合適的響應網(wǎng)格布局。
將樣式包裝到媒體查詢中，以適應于小尺寸屏幕。

案例代碼

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布局，在前端技術(shù)領域也是非常重要的一塊內(nèi)容，如果你還不是很了解的話，可以再去做一些深入的學習。

在此，感謝你的閱讀。我是楊小二，我們下次再見。

【5分鐘代碼練習】02—用CSS Grid實現(xiàn)響應式圖片布局的效果

學習更多技能
請點擊下方公眾號

【5分鐘代碼練習】02—用CSS Grid實現(xiàn)響應式圖片布局的效果

學習更多技能請點擊下方公眾號

學習更多技能
請點擊下方公眾號