下面是一個(gè)簡(jiǎn)單的例子：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列等寬 */
grid-auto-rows: minmax(100px, auto); /* 行高自適應(yīng) */
grid-gap: 10px; /* 網(wǎng)格之間的間距為10px */
}
.item {
background-color: #ccc;
padding: 20px;
}在這個(gè)例子中，我們創(chuàng)建了一個(gè)class名為“container”的網(wǎng)格布局容器，它有三列，并且各列之間等寬分布。該容器的行高自適應(yīng)，不需要考慮每個(gè)項(xiàng)目的高度。我們還為每個(gè)項(xiàng)目設(shè)置了一個(gè)背景顏色和邊距。
接下來(lái)，我們需要添加一些項(xiàng)目元素到容器中。這些項(xiàng)目可以是任何想要的元素，例如div，p，img等。每個(gè)項(xiàng)目都會(huì)自動(dòng)適應(yīng)網(wǎng)格中的大小，而不必受制于容器的尺寸和位置。例如：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div>
在這個(gè)例子中，我們將六個(gè)class名為“item”的項(xiàng)目添加到了容器中。由于容器具有3列和自適應(yīng)的行高，每行只能包含兩個(gè)項(xiàng)目（3列x2行=6個(gè)項(xiàng)目）。這些項(xiàng)目都被動(dòng)態(tài)地調(diào)整大小和位置，以適應(yīng)容器的空間。
在上面的示例中，我們?cè)O(shè)置了一個(gè)固定的列寬（1fr）。但是，網(wǎng)格布局還支持其他列寬設(shè)置選項(xiàng)，如固定像素寬度（例如，“grid-template-columns: 300px 500px 200px;”）和自適應(yīng)寬度（例如，“grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));”）。
我們還可以在網(wǎng)格容器中創(chuàng)建嵌套網(wǎng)格，這個(gè)示例來(lái)自于MDN：
<div class="wrapper">
<div class="box box1">
<div class="innerbox">Box 1.1</div>
</div>
<div class="box box2">
<div class="innerwrapper">
<div class="innerbox">Box 2.1</div>
<div class="innerbox">Box 2.2</div>
</div>
</div>
<div class="box box3">
<div class="innerbox">Box 3.1</div>
</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-gap: 0.5em;
}
.box {
background-color: lightgray;
border-radius: 5px;
padding: 0.5em;
}
.innerwrapper {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(4, auto);
grid-gap: 0.5em;
}
.innerbox {
background-color: lightblue;
border-radius: 5px;
padding: 0.5em;
}在這個(gè)示例中，我們創(chuàng)建了一個(gè)class名為“wrapper”的網(wǎng)格容器，它包含三個(gè)class名為“box”的項(xiàng)目元素。其中第二個(gè)項(xiàng)目元素還包含一個(gè)class名為“innerwrapper”的嵌套網(wǎng)格容器和兩個(gè)class名為“innerbox”的項(xiàng)目元素。這些元素都被設(shè)置為具有不同的背景顏色、圓角和邊距。
網(wǎng)格布局在前端開(kāi)發(fā)中具有廣泛的應(yīng)用場(chǎng)景。例如，開(kāi)發(fā)者可以使用它來(lái)構(gòu)建文件夾導(dǎo)航，圖庫(kù)和資訊頁(yè)面。由于它的靈活性和響應(yīng)式設(shè)計(jì)，它變得非常流行，并且被越來(lái)越多的網(wǎng)站和Web應(yīng)用程序所廣泛采用。