使用css + sass构建此网格的最佳方法是什么？

Question

我正在建立这个网格。

我只是构建一个简单直观的HTML页面 - 没有什么复杂的，我不需要在其他地方重用代码。将有2个文本框和两个图像将位于此网格上。

我最初会沿着这条路走下去：

https://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540

这项工作做得很好，但是使用框架（如Suzy）或其他解决方案会更好吗？

我基本上寻找最佳实践以及如何遵守工程SOLID，KISS，DRY和YAGNI原则。

Answer 1

  

将会有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>