使用CSS的可見網格線

我正在開發一個響應式網站。該網站在背景中有可見的網格線，您可以將其與這一個進行比較：http://fearonhay.com/（背景中非常柔和的灰色線條）。但是有一個區別，這使我找出解決問題的最佳方式有點困難：網站響應速度（％寬度）。使用CSS的可見網格線

我做了一個非常粗略的草案，它應該是什麼樣子。其實不僅有三列，但四：

Grid

我創建了一個快速小提琴（看看它在Chrome瀏覽器）來測試，如果它的工作原理我intented方式：http://jsfiddle.net/T76MK/

.lines { 
    background-image: -webkit-linear-gradient(0, black 1px, transparent 1px); 
    background-size: 25% 100%; 
} 
.grid { 
    margin-left: -30px; /* Gutter */  
} 
.grid__item { 
    box-sizing: border-box; 
    display: inline-block; 
    padding-left: 30px; /* Gutter */ 
    vertical-align: top;  
} 
.one-quarter { width: 25%; } 
.red { background: red; }

正如你所看到的，我對線條使用了線性漸變，但第二條和第四條線條僅有幾個像素。他們沒有正確地集中在排水溝中。第三行看起來不錯。任何想法如何解決這一問題？

在此先感謝。

來源

2013-11-15 Daniel

有/是一個很大的問題與你的代碼...

這是我會怎麼做：
http://jsfiddle.net/T76MK/7/

問：你爲什麼要在這裏使用雙下劃線？不好... .grid__item

另外，如果你需要這些排水溝（你不應該使用負邊距），你可能想看看你的網站/頁面的其他部分可能有其他代碼問題。

來源

2013-11-15 00:37:52

謝謝，只有在所有列具有相同的高度時，您的代碼才能正常工作，但情況並非如此。所以我不得不僞造背景漸變的線條，否則我需要使用一個圖像，並使用背景大小將其拉伸到完整的高度和寬度。我不確定，哪一個更好。我的代碼中的「__」基於BEM方法（http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/），這對我很有用。 Bootstrap也爲網格使用負邊距，爲什麼你認爲我不應該用它們去掉那些：最後一項的類？ – Daniel

我想你需要梳理一下你的HTML和CSS，man。 :)你上面提出的建議並不是一個很好的方式去實現你想要做的 - 完全可以。我用乾淨的解決方案更新了我的答案。讓我知道這是否適合你... –

每種方法都有其缺點。您的更新代碼可能在大多數情況下都適用，但只有當您的「.grid_items」具有相同的寬度（在我們的例子中爲「四分之一」）並且只填充一行時。如果在代碼中添加更多「grid_items」，由於「height：100％」，您將無法看到所有這些「grid_items」。無論如何感謝您的幫助！ – Daniel

使用CSS的可見網格線

回答

相關問題