0
我正在建立這個網格。使用css + sass構建這個網格的最佳方式是什麼？
我只是建立一個單一的，簡單的HTML頁 - 沒有什麼複雜的，我不會需要其他地方重用的代碼。將會有2個文本框和兩個圖像，它們將坐在這個網格上。
我最初打算走這條路線：
哪個做這項工作非常好，但我會用一個框架（如蘇茜）或其他解決方案得到更好的服務？
我基本上在尋找最佳實踐以及如何堅持工程SOLID，KISS，DRY和YAGNI原則。
A
回答
0
將會有2個文本框和兩個圖像，只是坐在這個網格上。
我不能調和你的問題中的圖像與描述，所以我去了描述。
這裏是一個CSS網格，包含兩個圖像和兩個文本框：
.grid {
display: grid;
width: 92vw;
height: 92vh;
margin: 1vh auto;
grid-template-columns: 46vw 46vw;
grid-template-rows: 46vh 46vh;
grid-template-areas:
"textbox image"
"image textbox";
}
.textbox {
border: 1px solid rgb(127, 127, 127);
padding: 6px;
}
.image {
background-image: url('http://placebear.com/800/400');
background-size: cover;
}<div class="grid">
<div class="textbox" contenteditable="true">You can edit me - I am a textbox...</div>
<div class="image"></div>
<div class="image"></div>
<div class="textbox" contenteditable="true">I am also a textbox - you can edit me too...</div>
</div>
_There將兩個文本框和兩個圖像，這將只是坐在這個grid._的你鏈接到的網格圖像有12個網格空間，而不是4個（可疑地，它有36個網格方塊）。你想要什麼類型的網格 - 一個6x2網格？ – Rounin
有那麼多的框架已經有爲什麼建立自己的 - 甚至有網站，讓您指定您的需求，然後將爲您建立的CSS – Pete
現在，我會去[網格佈局]（http ：//caniuse.com/#search=grid）和[flexbox]（http://caniuse.com/#search=flexbox）來實現良好的責任，而不需要臃腫的框架。 – Christoph