Untitled

dabblet.css

.layout {        
	display: grid;        
	grid-template-columns: 100px 1fr 100px 2fr 100px;        
	grid-template-rows: auto 50px 100px auto;        
	grid-template-areas:  "a a a a a"        
					      "c b b b d"
					      "e b b b d"
					      "f f f g g";        
}

.a {        
	grid-area: a;        
	background: red; 
}

.b { 
	grid-area: b; 
	background: blue; 
	color: white;
}        

.c { 
	grid-area: c; 
	background: black; 
	color: white;
}        

.d { 
	grid-area: d; 
	background: green;
}        

.e { 
	grid-area: e; 
	background: yellow; 
}        

.f { 
	grid-area: f; 
	background: pink; 
}        

.g { 
	grid-area: g; 
	background: purple; 
	color: red;;
}

dabblet.html

<div class="layout">	
	<div class="a">содержимое ячейки А</div>	
	<div class="b">оооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооочень длиииииииииииииииииииииииииииииииииииииииииинннннное содержимое ячейки B</div>	
	<div class="c">ячейка С</div>	
	<div class="d">яч. D</div>	
	<div class="e">cell E</div>	
	<div class="g">целл ДЖИ</div>	
	<div class="f"><a href="https://momenty.org/city/i178705/">Музей «Ячейка F»</a></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}