이 격자를 만들려고합니다. 복잡한 아무것도, 나는 다른 곳에서 코드를 재사용 할 필요가 없습니다 -css + sass를 사용하여이 격자를 구성하는 가장 좋은 방법은 무엇입니까?
난 그냥 하나의 간단한 HTML 페이지를 구축하지 있어요. 2 개의 텍스트 상자와 2 개의 이미지가이 그리드에 있습니다.
나는 처음에이 경로 아래로 갈 거라고 : 아주 잘 일을
을,하지만 난 더 나은 (수 지 등) 프레임 워크, 또는 다른 솔루션을 사용하여 제공 될 것인가?
저는 솔리드, 키스, 드라이 및 야그 니 원칙을 준수하기위한 모범 사례와 방법을 근본적으로 찾고 있습니다.
두 개의 텍스트 상자와 두 개의 이미지가이 그리드에 배치됩니다.
질문의 이미지와 설명을 일치시킬 수 없으므로 설명을 생략했습니다.
이
.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._ : 여기
는 두 개의 이미지와 두 개의 텍스트 상자를 포함하는 CSS 그리드입니다 당신이 링크하는 그리드 이미지는 4가 아닌 12 개의 격자 공간을 가지고 있습니다. (Debatably, 그것은 36 개의 격자 사각형을 가지고 있습니다). 어떤 종류의 그리드를 원하십니까? 6x2 그리드입니까? – Rounin이미 많은 프레임 워크가 있습니다. 왜 자신 만의 빌드를 만드세요? 귀하의 요구 사항을 지정하고 CSS를 작성하는 사이트조차도 있습니다. – Pete
요즘에는 [grid-layout] (http : //caniuse.com/#search=grid) 및 [flexbox] (http://caniuse.com/#search=flexbox)를 사용하여 비 대한 프레임 워크없이 훌륭한 책임을 수행하십시오. – Christoph