css - 使用 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，包含两个图像和两个文本框：

.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>