CSS中的9等份是指將一個元素分割成9個等分的布局。這種布局在制作響應式網(wǎng)站時經(jīng)常用到,它可以讓網(wǎng)站在不同設備尺寸下展示不同的布局,從而提升用戶體驗。
.container { display: grid; grid-template-columns: repeat(9, 1fr); }
上述代碼是實現(xiàn)9等份的方法,其中grid-template-columns
是設置列數(shù)和寬度的屬性。repeat()函數(shù)可以重復一個規(guī)則,這里重復了9次,每次占據(jù)1fr的寬度。因此,.container
元素被分成9個等分。
接下來我們可以使用grid-column-start
和grid-column-end
來指定一個元素在格子中所占據(jù)的區(qū)域。
.item { grid-column-start: 1; grid-column-end: 6; }
上述代碼將一個元素放在第一列,結(jié)束于第6列,這樣它就占據(jù)了9等份中的一半。同樣地,可以將一個元素放在第6列,并底部結(jié)束于第10列,就可以讓它占據(jù)9等份的另一半。
9等份的布局方法在響應式網(wǎng)站中是非常實用的。而且,還可以使用它來制作經(jīng)典的3欄布局,其中中間一列占據(jù)9等份,兩邊各占據(jù)1等份。如果你還沒有使用過這種布局方法,不妨嘗試一下,提升你的網(wǎng)站設計能力。