CSS布局是網頁設計中的關鍵部分，通過CSS布局可以實現自己想要的網頁樣式。在CSS布局中，圖片模板也是很重要的一部分。下面就來介紹一下如何使用CSS布局實現圖片模板。

首先，我們需要在HTML中準備好圖片模板所需的結構。比如，我們可以使用一個div來包含圖片和文字：

<div class="template">
<img src="example.jpg" alt="Example Image">
<p>This is an example text.</p>
</div>

接著，我們可以在CSS中設置這個div的樣式。比如，我們可以使用浮動和寬度來實現圖片和文字的布局：

.template {
float: left;
width: 50%;
margin: 0 10px 10px 0;
}
.template img {
display: block;
max-width: 100%;
height: auto;
}

在這段CSS代碼中，.template類設置了一個左浮動和寬度為50%的div，同時設置了margin來讓不同的圖片模板之間產生一定的間隔。.template img類設置了圖片最大寬度為100%，同時保留了圖片的高度比例。

最后，我們可以通過重復使用這個div來實現整個頁面的布局。比如，我們可以使用一個容器div來包含所有的圖片模板：

<div class="container">
<div class="template">
<img src="example.jpg" alt="Example Image">
<p>This is an example text.</p>
</div>
<div class="template">
<img src="example.jpg" alt="Example Image">
<p>This is another example text.</p>
</div>
<div class="template">
<img src="example.jpg" alt="Example Image">
<p>This is a third example text.</p>
</div>
</div>

通過這樣的方式，我們就可以使用CSS布局來實現圖片模板了。