CSS3 Grid是CSS的一種布局方式，它允許我們?cè)诙S網(wǎng)格中對(duì)元素進(jìn)行布局，相對(duì)于傳統(tǒng)的布局方式，CSS Grid更加靈活且易于掌握。

/* 創(chuàng)建一個(gè)基本的網(wǎng)格容器 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 定義三列 */
grid-gap: 10px; /* 設(shè)置列之間的間距 */
justify-items: center; /* 設(shè)置其內(nèi)部元素在水平方向上居中 */
align-items: center; /* 設(shè)置其內(nèi)部元素在垂直方向上居中 */
}
/* 定義子元素的樣式 */
.item {
background-color: #eee;
height: 100px;
}
/* 定義不同的子元素占位 */
.item:nth-child(2) {
grid-column-start: 2;
grid-column-end: 4;
}
.item:nth-child(3) {
grid-row-start: 2;
grid-row-end: 4;
}

以上是最基礎(chǔ)的使用方式，我們可以在CSS Grid中設(shè)置行、列、間距等屬性，以及設(shè)置子元素的占位，實(shí)現(xiàn)更加復(fù)雜的排版效果。

蘋果公司最新發(fā)布的官網(wǎng)就使用了CSS Grid來(lái)進(jìn)行排版，通過(guò)使用GRID布局方式，網(wǎng)頁(yè)效果更加美觀，排版更加靈活。