CSS網絡填空是一種CSS的布局方式,在網格中指定元素的位置和尺寸。
.wrapper { display: grid; /* 定義一個網格容器 */ grid-template-columns: 1fr 1fr 1fr; /* 定義3個等寬的列 */ grid-template-rows: 100px 100px; /* 定義2個100px高的行 */ gap: 20px; /* 定義元素之間的間隔 */ } .box1 { grid-column: 1/3; /* 在1~3列之間占2列 */ grid-row: 1; /* 在第1行 */ } .box2 { grid-column: 2; /* 在第2列 */ grid-row: 2; /* 在第2行 */ } .box3 { grid-column: 3; /* 在第3列 */ grid-row: 2; /* 在第2行 */ }
在上面的例子中,我們首先定義了一個名稱為.wrapper的網格容器,用于包裹元素。然后我們使用grid-template-columns和grid-template-rows來指定列和行的尺寸。gap屬性可以用來設置元素之間的間隔。
接著我們定義了三個盒子(.box1、.box2和.box3),并使用grid-column和grid-row來指定它們在網格中的位置。比如.box1占據了第一行的前兩列(1~3列之間),.box2和.box3分別在第2行的第2列和第3列。
CSS網絡填空是一種強大的布局方式,可以用來創建各種復雜的布局,比如響應式布局、柵格布局等等。如果您想深入了解CSS網格,請參考官方文檔。