具有交替行的簡單網格-css教學-PHP中文網

具有交替行的簡單網格

Linda Hamilton

發布： 2024-12-08 16:23:10

原創

736 人瀏覽過

Simple Grid With Alternating Rows

介紹

這是一個簡單的演示，展示瞭如何擁有一些具有交替行的簡單網格。在此範例中，一行包含三個項目，另一行包含兩個項目。
這是一個 100% CSS 解決方案，歸結為使用 @property 作為 grid-columns 屬性的跨度值。

它是如何運作的

嗯，很簡單。您需要知道有多少個不同的行以及這些不同行總共包含多少個項目。

在我的範例中，這將是：

2 個不同的行
3 件 2 件 = 5 件

這表示在執行 :nth-child() 選擇器時，您必須使用該總數：

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --col-span: 4;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --col-span: 6;
}

登入後複製

col-span 自訂屬性的使用方式如下：

.item {
    ...
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    ...
}

登入後複製

差不多就是這樣了。它非常簡單，沒什麼大不了的，但對每個人仍然有用。

更適合設計師但更複雜的解決方案

對於更適合設計者的解決方案，我認為聲明實際的項目數量而不是更改跨度，因為如果更改網格中的列數，但忘記調整跨度，則會得到不良效果。這就是為什麼我添加了另一個自訂屬性並更改它。

最不幸的部分是，無論您選擇哪種解決方案，如果您想要完全動態的解決方案，則需要手動更改第 n 個子選擇器，或者透過 JavaScript 更改。（你也可以使用SASS / SCSS，這顯然也是一個好方法）

新加入的屬性如下所示：

@property --row-items {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

登入後複製

對於項目，您可以變更屬性 --row-items
的值

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --row-items: 3;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --row-items: 2;
}

登入後複製

現在直接在 .item 類別上計算跨列，而不是選擇 x。

.item {
    --span-cols: calc(var(--grid-cols) / var(--row-items));
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
}

登入後複製

作為參考，列和行自訂屬性聲明如下：

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

登入後複製