最近，我解決了一種報(bào)紙風(fēng)格的設(shè)計(jì)，需要具有元素間隔板的多排和柱跨度。模型（上）突出顯示了這表現(xiàn)出的複雜性。傳統(tǒng)的佈局方法將使這一重大挑戰(zhàn)。

該項(xiàng)目的主要要求是：

• 清晰的網(wǎng)格輪廓。
• 可變柱寬度和高度。
• 塊之間的分隔線(xiàn)。

CSS網(wǎng)格：經(jīng)典佈局的現(xiàn)代解決方案

由於標(biāo)準(zhǔn)CSS的一維性質(zhì)，報(bào)紙佈局非常困難。元素水平或垂直流動(dòng)。即使是彈性箱，雖然功能強(qiáng)大，但仍然是單向的。

該佈局要求跨越HTML表功能的行和列，並結(jié)合現(xiàn)代CSS的響應(yīng)性和靈活性。 CSS網(wǎng)格優(yōu)雅地橋接了這一差距，提供了兩全其美的最好。它的grid-gap屬性對(duì)於創(chuàng)建溝槽特別有用，但是在這些溝槽中精確地居中的分隔線(xiàn)需要仔細(xì)考慮。

讓我們探索三種實(shí)現(xiàn)這一目標(biāo)的技術(shù)。

我們的目標(biāo)

我們將建立簡(jiǎn)化的報(bào)紙?jiān)O(shè)計(jì)，以說(shuō)明三種分隔技術(shù)。簡(jiǎn)單性掩蓋了根本的挑戰(zhàn)。

技術(shù)1：“人造”列方法

此方法使用網(wǎng)格容器中的偽選擇器創(chuàng)建“人造”列來(lái)繪製垂直線(xiàn)。根據(jù)需要添加水平分隔線(xiàn)。

<div>
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
</div>

創(chuàng)建列隔板

使用display: grid建立了三列網(wǎng)格。偽選擇器（ ::before和::after ）生成兩個(gè)全高列。

 .FrontPage {
  位置：相對(duì)；
  顯示：網(wǎng)格；
  網(wǎng)格板柱：1FR 1FR 1FR;
  網(wǎng)格柱隙：32px;
  邊界：1PX實(shí)心透明；
  邊界頂：1px固體＃dadce0;
  邊界底：1px固體＃dadce0;
  溢出：隱藏；
}

.FrontPage ::之前，
。
  位置：絕對(duì)；
  頂部：0;
  身高：100％；
  內(nèi)容： '';
  寬度：計(jì)算（33.3％-4PX）; / *計(jì)算以考慮天溝 */
}

.FrontPage :: {
  左：0;
  邊境權(quán)利：1px固體＃dadce0;
}

。
  右：0;
  邊界左：1PX固體＃dadce0;
}

注意： 33.3%計(jì)算說(shuō)明了天溝寬度。公式為： 33% - (gutter-width / (number of gutters * number of columns)) 。

單個(gè)偽元素也可以通過(guò)調(diào)整後的寬度和定位計(jì)算來(lái)使用。

構(gòu)建網(wǎng)格

添加了四個(gè)內(nèi)容塊，每個(gè)塊帶有修飾符類(lèi)， z-index高於偽元素。

<div>
  <div class="fp-cell fp-cell--1"></div>
  <div class="fp-cell fp-cell--2"></div>
  <div class="fp-cell fp-cell--3 fp-cell--border-top"></div>
  <div class="fp-cell fp-cell--4 fp-cell--border-top"></div>
</div>

CSS樣式的單元格並處理行/柱跨度。

 .fp-cell {
  位置：相對(duì)；
  z索引：2;
  填充：16px 0;
  背景色：#FFF;
}

/ *跨度樣式 */
.fp-cell  -  1 {網(wǎng)格行：1 / span 2; }
.fp-cell  -  2 {網(wǎng)格列：2 / span 2; }

/ *水平分層 */
.fp-cell-border-top :: {
  內(nèi)容： '';
  位置：絕對(duì)；
  頂部：0;
  左：-16px;
  右：-16px;
  邊界頂：1px固體＃dadce0;
}

技術(shù)2：背景顏色

這種方法利用grid-gap和背景顏色。 “差距”是通過(guò)顯示網(wǎng)格的背景顏色在視覺(jué)上創(chuàng)建的。網(wǎng)格電池內(nèi)的填充模擬了天溝寬度。

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    <div class="fp-cell fp-cell--2"><div class="fp-item">2</div></div>
    <div class="fp-cell fp-cell--3"><div class="fp-item">3</div></div>
    <div class="fp-cell fp-cell--4"><div class="fp-item">4</div></div>
  </div>
</div>

.Container {overflow-x：hidden;邊界頂：1px固體＃dadce0;邊界底：1px固體＃dadce0; }
。
.fp-cell {填充：16px;背景色：#FFF; }

容器處理溢出，填充填充細(xì)胞。

技術(shù)3：細(xì)胞邊界

該技術(shù)在每個(gè)單元格中添加了右和底部邊界。填充模擬grid-gap 。再次需要包裝容器。

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    ...
  </div>
</div>

。 Overflow-X：隱藏； }
。 ...} / *網(wǎng)格樣式，邊境補(bǔ)償?shù)呢?fù)餘量 * /
.fp-cell {填充：16px;背景色：#FFF;邊境權(quán)利：1px固體＃dadce0;邊界底：1px固體＃dadce0; }

負(fù)邊緣補(bǔ)償細(xì)胞邊界。

結(jié)論

儘管這三種技術(shù)都是可行的，但第二種（背景顏色）提供了最簡(jiǎn)單，最可能的解決方案。但是，根據(jù)特定的約束或DOM訪(fǎng)問(wèn)限制，其他方法可能是可取的。最佳選擇取決於項(xiàng)目的上下文。

以上是帶有CSS網(wǎng)格和元素之間邊界線(xiàn)的報(bào)紙佈局的技術(shù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！