CSS循環列表是一種非常有用的功能，它可以讓我們在頁面中展示一系列數據，并讓它們以一定的樣式展示出來。下面我們來看一下如何使用CSS循環列表。

ul {
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
}
li {
width:100px;
height:100px;
margin:10px;
background-color:gray;
}
li:nth-child(odd) {
background-color:lightgray;
}

首先我們通過CSS給ul和li元素設置了一系列的樣式。ul元素設置為display:flex和flex-wrap:wrap屬性，這樣就可以讓我們的li元素排列為一個網格布局。li元素設置寬高和margin屬性，這樣就可以讓我們的元素在網格中排列開。最后我們將li:nth-child(odd)設置為另外一種背景色，這樣就可以實現列表隔行變色的效果。

接下來我們來看一下如何動態的展示數據。我們可以使用JavaScript通過循環的方式動態的生成li元素。例如：

var arr = ['apple', 'banana', 'orange', 'peach'];
for(var i=0; i<arr.length; i++){
var li = document.createElement('li');
li.innerHTML = arr[i];
document.querySelector('ul').appendChild(li);
}

這段代碼首先定義了一個數組，數組中存儲了一些數據。然后通過循環的方式遍歷數組，每次循環動態的創建一個li元素，并將數組中的值設置為li元素中的文本內容。最后我們通過querySelector找到了頁面中的ul元素，并將新創建的li元素添加到ul元素的末尾。

通過這樣的方式，我們就可以動態的展示數據了。而由于我們之前定義了ul和li的樣式，所以我們生成的li元素也會按照我們預定義的樣式在頁面中展示出來。