無框網格定位/浮動樣式

Question

我很難完全理解如何使用無框網格。我的意思是，我完全理解這個概念。聽起來不錯。

我想我的牛肉只是它沒有提供任何東西來定位你的元素。它只是設置它們的寬度，就是這樣。因此，即使您將列寬應用於元素，除非您完全開始浮動或定位，否則所有內容都會疊加。

在這方面，我想我正在尋找一些關於是否有一些通用的定位樣式，我可以用來保持這些元素堆疊。

或者這是否太寬泛？我是否應該根據具體情況來定位我的元素？

（也只是一個供參考我利用SASS，萬一有助於在所有）

謝謝！

Answer 1

UPD：無框網格已經拿出了實際的代碼（SASS，LESS和JS），所以下面的答案已經過時。

無框是比網格框架更多的方法。

除了網格計算的單個函數（即使沒有關於如何實際使用此函數的適當文檔），它本身不會執行任何操作。

讓我們一起來看看：

---

1.常規的固定寬度的網格。

挑選一個列寬，一個排水溝寬度......你知道，通常的東西。不要擔心列的數量，但另外使用通常用於創建固定寬度網格的任何標準。我建議使用相對較小的列寬來增加靈活性。

我們必須自己組裝網格。使用任何東西來實現這一點，無框架不提供任何。列寬應該是固定的寬度。

---

2.讓它重複無限。

現在，給您的網格無限數量的列，以便無論您的視口有多寬，越來越多的列進入視野。想象一下，你正在尋找一個無限寬的蜂巢，裏面充滿了柱子而不是六角形。

「無限數」它們似乎意味着「任何必要的數字」。無框主頁適用於精彩的26列（您需要顯示寬度爲1920px才能查看），但frameless.scss僅爲16列提供變量。

「給你的網格添加許多列」意味着「想出一個最大限度利用一定數量的列的設計」。

---

3.中心它在視口中。

將您的網格水平對齊到視口中間。對於具有偶數列的網格（如圖所示），請將視口的中心點對準兩個最中間的列之間的排水溝中間。對於奇數編號的網格，請將其對齊到最中心的列中間。

這是非常基本的，但它需要我們手動執行另一行CSS代碼。

---

4就是這樣，真的。

開始使用網格。隨着更多列可用，請使用媒體查詢來調整您的設計。由於您將逐列修改而不是逐個像素，因此您可以精確選擇佈局何時應該適應而不應該適應的時間。例如，這個網站只適應大約320,480,600,900和1900像素。要看到它的實際操作，請嘗試調整瀏覽器窗口的大小。

不，那不是「它」。這是工作實際開始的地方。

您必須手動編寫網格以適應各種視口，而且Frameless不提供任何工具。

---

所以，如果你正在尋找可以用來組裝網格工具，我建議Susy。這是一個偉大而優雅的SASS。

蘇西是非常靈活的。它有不同的網格類型（demo）。它也有不同的方法：你可以去content first聲明單列寬度，並讓Susy調整列數以匹配窗口寬度。或者你可以聲明什麼樣的列數與什麼窗口寬度相對應，並讓Susy相應地調整列寬。

Susy讓你實現了無框架建議，但它也提供了所有必要的工具。 Susy在技術上有所不同，他們也有同樣的想法：從手機的小網格開始，隨着屏幕變大而變大。這demo說明了兩個這樣的步驟：它從7列開始，但如果屏幕寬度暗示轉向12列。

在這裏，我創建了一個網站，使用Susy分五步展開：http://am-teh.ru您可以在此StackOverflow post中看到此網站佈局背後的代碼（以及其概念的演變）。 Susy的開發人員對此給予了積極的評價。