HTML5是Web前端技術中的重要一環。特別是針對手機端web應用，HTML5尤為重要。手機九宮格菜單是一種常見的手機應用交互方式，本文將介紹如何使用HTML5編寫手機九宮格蔡菜單代碼。

//HTML代碼
<div class="menu">
<div class="grid-item">
<a href="#">
<i class="fa fa-home"></i>
<span>Home</span>
</a>
</div>
<div class="grid-item">
<a href="#">
<i class="fa fa-camera-retro"></i>
<span>Camera</span>
</a>
</div>
<div class="grid-item">
<a href="#">
<i class="fa fa-music"></i>
<span>Music</span>
</a>
</div>
<div class="grid-item">
<a href="#">
<i class="fa fa-envelope"></i>
<span>Email</span>
</a>
</div>
<div class="grid-item">
<a href="#">
<i class="fa fa-lock"></i>
<span>Security</span>
</a>
</div>
<div class="grid-item">
<a href="#">
<i class="fa fa-cog"></i>
<span>Settings</span>
</a>
</div>
</div>
//CSS代碼
.menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
background-color: #e9e9e9;
border-radius: 10px;
}
.grid-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border-radius: 10px;
}
.grid-item a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
color: #000;
padding: 10px;
border-radius: 10px;
}
.grid-item a i {
font-size: 30px;
margin-bottom: 10px;
}
.grid-item a span {
font-size: 16px;
}
@media (max-width: 768px) {
.menu {
grid-template-columns: repeat(2, 1fr);
}
}

HTML部分將9個菜單通過div標簽包裹起來，通過class屬性設置樣式；每個菜單包含一個a標簽，再通過i和span標簽創建圖標和文字；CSS部分使用grid網格布局，讓每個菜單均分屏幕寬度，通過媒體查詢實現響應式布局，隨著屏幕變窄，將菜單從3列變為2列。