在CSS網(wǎng)格布局中的列中填充項(xiàng)目的實(shí)現(xiàn)方法

假設(shè)我們有n 個(gè)項(xiàng)目,并且我們必須在網(wǎng)格布局中將這些項(xiàng)目按列排序。列數(shù)是固定的,我們還必須確保網(wǎng)格布局中的行數(shù)最少,以便有效填充網(wǎng)格。在本文中,我把數(shù)字視為項(xiàng)目。并且根據(jù)我們的要求在網(wǎng)格布局中排列1-13之間的數(shù)字。列數(shù)固定為三。我將使用 React和SCSS(Sassy CSS)對(duì)此進(jìn)行演示。
1、如果必須按行排列,那將是非常簡(jiǎn)單的。用CSS就可以了,代碼如下所示:

完整的代碼,包括CSS部分,如下所示:

輸出效果

如你所見(jiàn),數(shù)字按行排列。在這里,網(wǎng)格項(xiàng)目沿水平方向流動(dòng),并根據(jù)需要自動(dòng)創(chuàng)建新行。當(dāng)網(wǎng)格項(xiàng)目流達(dá)到列尾時(shí),將創(chuàng)建一個(gè)新行。這也稱(chēng)為行優(yōu)先排列,因?yàn)橹挥性谇耙恍型耆顫M時(shí)才開(kāi)始下一行。
但是我們的要求是按列安排項(xiàng)目,所以為了按列排列項(xiàng)目,我們需要知道網(wǎng)格布局中的行數(shù)。我可以解釋為什么要需要知道行數(shù)。在逐行排列中,僅當(dāng)前一行完全填滿時(shí)(即,前一行中的項(xiàng)目數(shù)已等于列數(shù)),才開(kāi)始下一行。
類(lèi)似地,在逐列排列中,只有當(dāng)前一列完全填滿時(shí)(即,前一列中的項(xiàng)目數(shù)已等于行數(shù)),新列才開(kāi)始。因此,我們需要知道行數(shù)有多少。那么問(wèn)題來(lái)了,我們?nèi)绾尾拍苤谰W(wǎng)格布局中要進(jìn)行的行數(shù)呢?可以通過(guò)基本的數(shù)學(xué)學(xué)出來(lái).....。我們現(xiàn)在知道了網(wǎng)格項(xiàng)目的數(shù)量,也知道列數(shù)。因此,我們要進(jìn)行行數(shù)最小化可以運(yùn)用此公式Math.ceil(itemsCount/columnsCount),為什么要最小化行數(shù),因?yàn)槿绻覀儾捎酶蟮碾S機(jī)整數(shù)作為行數(shù),那么網(wǎng)格將無(wú)法有效填充,整個(gè)布局中會(huì)有一些格子沒(méi)能填充上。以下CSS代碼是按列排列的,并且由于我們必須動(dòng)態(tài)的設(shè)置grid-template-rows字段,因此以下代碼中不存在該字段:

完整的代碼,包括CSS部分,如下所示:

可以看到在第16行,會(huì)計(jì)算行數(shù)。在第17行,該grid-template-rows字段是動(dòng)態(tài)設(shè)置的。

在這里,你可以看到數(shù)字以固定的列數(shù)(3)按列排列。同樣,最小化的行數(shù)為五。如果行數(shù)少于五,則無(wú)法進(jìn)行排列。并且如果行數(shù)大于五,則布局中將有沒(méi)填上的空白空間。僅當(dāng)前一列完全填滿時(shí),列才開(kāi)始。
結(jié)尾
這種技巧可以計(jì)算網(wǎng)格布局中要進(jìn)行的行數(shù)并對(duì)其進(jìn)行動(dòng)態(tài)設(shè)置,從而非常輕松地解決了該問(wèn)題。由于我們需要知道按列排列的行數(shù),因此可以說(shuō),為解決此問(wèn)題而對(duì)項(xiàng)目進(jìn)行排列時(shí),行數(shù)和列數(shù)都需要知道。注意:當(dāng)布局的寬度(而不是列數(shù))固定時(shí),可以采用具有相同類(lèi)型的解決方案來(lái)解決。
到此這篇關(guān)于在CSS網(wǎng)格布局中的列中填充項(xiàng)目的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)css 網(wǎng)格布局填充項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 網(wǎng)格布局也稱(chēng)grid布局,利用grid布局可以很輕松的實(shí)現(xiàn)很多的網(wǎng)頁(yè)布局,Grid 布局與 Flex 布局有一定的相似性,都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置,這篇文章主要介紹了CSS布2023-07-24
- 這篇文章主要介紹了CSS Grid 網(wǎng)格布局全解析的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-29
- 這篇文章主要介紹了CSS網(wǎng)格布局的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-29
css框架(CSS Frameworks):CSS框架應(yīng)用
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:css框架通常只是一些css文件的集合,這些文件包括基本布局、表單樣式、網(wǎng)格或簡(jiǎn)單結(jié)構(gòu)、以及樣式重置, 什么是css框架2009-04-02