該帖子的編輯日期為 2023年7月22日 以便在重疊網格專案的示例中更好地描述專案放置。當觀察人們逐漸熟悉css grid時,我注意到一些問題比其他人更容易吸引人們,或者在構建布局時面臨更多挑戰。 本簡短的系列文章將深入**這些常見問題,旨在更好地理解grid,以便您可以預期布局問題,並在出現問題時更輕鬆地對其進行除錯。
我見過的人們最大的難題是無意中建立了額外的網格軌跡,這可能會使整個布局混亂。 這些額外的軌道稱為隱式軌道,它們是通過將專案放置在顯式網格邊界之外而建立的。 為了充分利用grid,最好了解顯式和隱式網格的概念以及它們之間的關係。
顯式網格是使用grid-template-rows
和grid-template-columns
屬性定義的(如果需要,可以使用簡寫的grid-template
):
.grid
在這裡,我們定義了乙個具有四行四列的網格,並且可以知道我們的網格將至少具有四行四列。 即使我們沒有放置任何網格子物件,以使我們的網格完全是空的,它仍然會占用上面定義的四行四列的空間。
如果我們對grid-template-rows
屬性使用repeat(4, auto)
,那麼我們的網格行都將具有高度auto
–因此,如果我們沒有網格子級,那麼我們的行仍將存在,它們將摺疊為零高度,沒有任何內容可填充它們。 如果我們新增行間隙(例如row-gap: 40px
),那麼row-gap: 40px
的合併高度將構成網格的高度–因此,如果沒有任何內容,它可能看起來像是乙個較大的邊距或填充值,破壞了您的布局!
隱式軌道是僅通過放置專案建立的軌道。 grid中的這種行為是有意的,非常有用。 例如,如果您有乙個四列的網格,我們要用不確定的專案數來填充(例如,新聞提要。如果我們不知道專案數,那麼我們將不知道需要多少行預設情況下,網格項放置在下乙個可用的網格單元中,我們可以簡單地省略grid-template-rows
屬性,並允許grid的自動放置為內容建立正確的行數。
(旁註:我在這裡假設網格使用預設的grid-auto-flow: row
。如果將其更改為grid-auto-flow: column
,則將在行軸上建立隱式軌道。)
.grid
我們的網格有四列。
這些專案填充第一行,然後建立乙個新行。
我們可以使用grid-auto-rows
和grid-auto-columns
控制隱式軌道的行為。
.grid
上面的**除了定義四個顯式的列和行軌跡之外,還指示grid任何建立的隱式行軌跡應具有150px的固定高度。 此屬性是可選的,如果沒有此屬性,任何隱式軌道的預設大小將為auto
。
要將專案放置在我們剛剛建立的網格上,我們可以執行以下操作:
.item
我們正在使用開始行和結束行將網格項放置在網格的左下方。
這不會造成任何問題,因為我們通過網格線號顯式放置專案。 我們知道網格有四行四列(因此在任一方向上有五條網格線),因此我們不太可能無意間無意地使用了更高的行號並偶然地建立了隱式軌跡。
另外,我們可以使用span關鍵字代替開始或結束行:
.item
我喜歡使用span
進行網格放置–當您知道某個專案需要跨一定數量的網格軌跡而不是在特定的行結束時,這通常會很有用–但是這意味著您有時可能會失去對所放置的網格線的跟蹤乙個專案。
在這裡,我們使用span
代替了grid-row-end
線。 如果我們將跨度值更改為3而不是2,這將導致該專案跨度超過可用行的行徑–哇! 我們建立了乙個隱式軌道!
有時會出現此問題的乙個地方是當您希望網格專案相互重疊時。 沒有顯式放置的專案將放置到下乙個可用的網格單元中,如果沒有可用的網格單元,則將建立隱式軌道,而不是將專案堆疊在一起。 這種行為非常有用,因為它意味著我們不必總是顯式放置專案,但是在這種情況下,它對我們並不是特別有用!
我的乙個朋友正在使用grid定位兩個元素,乙個元素位於另乙個元素的頂部,但偏移了一行:
這是用於建立布局的**:
.grid
.item:first-child
.item:nth-child(2)
而不是所需的布局,我們得到這樣的:
第二項怎麼了? 您能在這裡發現問題嗎? 兩項都使用span關鍵字作為grid-column
值。 第一項將正確放置,因為它將自動放置在跨度為4的第乙個可用單元格中。第二項沒有開始或結束行,因此瀏覽器需要解決此問題,方法是:生成隱式列軌道。
如果第二個專案只有乙個span值,並且行軸上沒有起始線,則它將包裝到下一行,因為該專案仍將參與網格的流動。 這不是我們想要的布局,但可能會減少一些困惑! 但是在上面的**中,瀏覽器不知道我們要將專案放置在哪一列。它通過將專案從列軸的第5行開始放置並生成四個隱式軌道來解決此問題。
因為我們沒有使用grid-auto-columns
為隱式軌道定義大小,所以它們的預設大小為auto
。 如果網格專案沒有內容,那麼這些軌道將摺疊為0的寬度,從而使我們的專案不可見。 我們的網格專案包含一些文字,因此這些隱式軌道將自動調整大小以適應此情況。
如果我們的column-gap
值為20px
,則將看到兩個列間距的寬度被新增到了網格中,儘管軌跡本身的寬度為0。
這裡的解決方案是將兩個專案顯式地放置在起始值和結束值處:
.item:first-child
.item:nth-child(2)
演示位址
那麼,如何最好地避免隱式軌道出現問題呢? 一種方法是了解grid如何在後台計算我們的布局。
這聽起來比實際要可怕! 網格專案放置演算法是解決網格專案放置的順序。 首先明確定位的網格專案,然後是具有明確行位置的專案,然後瀏覽器確定隱式網格中的列,並相應地放置所有自動放置的專案(沒有明確位置的專案)。 這是假設grid-auto-flow
屬性值是row
(預設值)。 牢記這一點可以幫助您理解為什麼在乙個軸上而不是在另乙個軸上建立隱式軌跡(如果這與您的期望相反)。
我還為您提供了一些放置物品的技巧,以幫助您避免意外將物品從明確的網格中推出...
.grid
使用-start和-end作為行名的字尾會建立乙個網格區域,這使得放置影象非常簡單:
.image
您還可以使用grid-template-areas
屬性執行類似的操作,這對許多人來說更直觀–請記住,如果需要重疊的網格項,則該操作將無效。
有時按結束行號(而不是起始行號)放置可以避免產生意外的隱式軌跡的問題。 以上面的示例為例,也許我們知道我們希望影象跨越三個網格軌跡,所以我們將span關鍵字用作grid-column-end
值。 但是,最好使用span作為grid-column-start
值並將其顯式放置在其結束行上:
.image
如果我們有乙個非常大的網格,這可能會有所幫助。 想象一下,我們的網格有20列而不是4列,我們可能知道它需要放置在離末端一排的位置,但是我們不想每次都必須計算起始行,這很煩人並容易出錯!
我發現一種非常有用的技術(以及我之前寫過的東西)是使用負行號放置網格項。 負行號代表網格的反行。 因此,在具有四個軌道的網格中(該網格具有五個網格線),線-1相當於線5,線-2相當於線4,依此類推。
同樣,在使用大型網格時,這非常方便。 如果我們知道並且專案需要與網格的末端對齊,那麼我們可以簡單地使用網格線-1,而不必記住最後一行是第21行。
我徹底推薦使用firefox開發工具來檢查和除錯css grid問題。 網格檢查器允許您開啟行號,因此,即使隱式軌道的大小已縮小到零,您仍然可以看到它們已經建立。 (檢查員還會向您顯示負行號-非常方便!)
翻譯自:
2021 01 06 隱式鏈結
dll編譯完成後生成 dll與 lib,但其生成的 lib檔案與靜態鏈結庫的不同,動態鏈結庫中的 lib裡不包含 只包含一些輔助性的資訊。如果有了 dll與 lib檔案即可使用隱式鏈結。declspec dllimport stdcall int plus int x,int y declspec ...
dll的隱式鏈結
在應用程式 或另乙個d l l 能夠呼叫d l l中的函式之前,d l l檔案映像必須被對映到呼叫程序的位址空間中。若要進行這項操作,可以使用兩種方法中的一種,即載入時的隱含鏈結或執行期的顯式鏈結。這裡主要介紹隱式鏈結。若要建立d l l模組,必須執行下列操作步驟 1 首先必須建立乙個標頭檔案,它包...
Scala隱式轉換之隱式引數 1
函式或者方法可以帶有乙個標記為implicit的引數。在這種情況下,編譯器將會查詢預設值,提供給該函式或者方法。示例 case class d left string,right string def quote title string implicit d d d.left title d.ri...