CSS寫網格是前端開發中非常常見的技術。其中，網格54是一種比較基礎的網格系統，它可以用來布局網頁中的各個元素。下面我們就來看一下如何使用CSS來實現網格54。

/* 網格54的基本樣式 */
.grid-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
/* 網格54的擴展樣式 */
[class*="col-"] {
float: left;
margin: 0;
}
.col-1 {
width: 20%;
}
.col-2 {
width: 40%;
}
.col-3 {
width: 60%;
}
.col-4 {
width: 80%;
}
.col-5 {
width: 100%;
clear: both;
}

上面的代碼中，我們定義了兩個基本的網格樣式：grid-5和grid-4。分別用于定義5列和4列的網格系統。它們使用了CSS中的Grid布局，通過grid-template-columns來指定網格的列數及寬度比例，通過grid-gap來指定網格之間的間隔距離。

此外，我們還定義了一些擴展樣式，用于在不使用Grid布局的情況下構建網格。我們使用了CSS的float屬性和寬度（width）屬性來定義不同列數的寬度比例。其中.col-5的clear屬性用于使其下面不再有浮動元素，以避免網頁布局錯亂。