寻找CSS网格生成器或配置器

Question

有了Chrome，Firefox和Safari技术预览版中的CSS网格支持，有没有人找到一个不错的CSS网格生成器或配置器？

有点像这里这样Flexbox的发电机：http://the-echoplex.net/flexyboxes/

Answer 1

这东西相当基本的上手，但我敢肯定，你可以建造它，@thomasdecrick。

function updateGridStyles() { 
 
var widthQuantity = document.getElementsByClassName('width-quantity')[0].value; 
 
var widthUnits = document.getElementsByClassName('width-units')[0].value; 
 
var heightQuantity = document.getElementsByClassName('height-quantity')[0].value; 
 
var heightUnits = document.getElementsByClassName('height-units')[0].value; 
 
var gridColumns = document.getElementsByClassName('columns')[0].value; 
 
var gridRows = document.getElementsByClassName('rows')[0].value; 
 
var gridStyles = document.getElementsByClassName('grid-styles')[0]; 
 
var gridSandbox = document.getElementsByClassName('grid-sandbox')[0]; 
 

 
gridStyles.textContent = ''; 
 
gridStyles.textContent += '.myCSSGrid {' + "\n"; 
 
gridStyles.textContent += ' display: grid;' + "\n"; 
 
gridStyles.textContent += ' width: ' + widthQuantity + widthUnits + ';' + "\n"; 
 
gridStyles.textContent += ' height: ' + heightQuantity + heightUnits + ';' + "\n"; 
 
gridStyles.textContent += ' margin: 0 auto;' + "\n"; 
 
gridStyles.textContent += ' grid-template-columns: ' + gridColumns + ';' + "\n"; 
 
gridStyles.textContent += ' grid-template-rows: ' + gridRows + ';' + "\n"; 
 
gridStyles.textContent += ' grid-template-areas: ' + "\n"; 
 

 
for (var i = 0; i < gridRows; i++) { 
 
    gridStyles.textContent += ' "'; 
 

 
    for (var j = 0; j < gridColumns; j++) { 
 
     gridStyles.textContent += ' . '; 
 
    } 
 

 
    gridStyles.textContent += '";' + "\n"; 
 
} 
 

 
gridStyles.textContent += '}'; 
 

 
var gridSandBoxSrcDoc = ''; 
 
gridSandBoxSrcDoc += "\n"; 
 
gridSandBoxSrcDoc += '<style>' + "\n"; 
 
gridSandBoxSrcDoc += 'body {background-color: rgb(0, 0, 191);}' + "\n"; 
 
gridSandBoxSrcDoc += 'h2 {color: rgb(255, 255, 255);}' + "\n"; 
 
gridSandBoxSrcDoc += gridStyles.textContent + "\n"; 
 
gridSandBoxSrcDoc += 'div div {border: 1px solid rgb(255, 255, 255);}' + "\n"; 
 
gridSandBoxSrcDoc += '</style>' + "\n"; 
 
gridSandBoxSrcDoc += '<h2>.myCSSGrid</h2>' + "\n"; 
 
gridSandBoxSrcDoc += '<div class=\'myCSSGrid\'>' + "\n"; 
 

 
for (var i = 0; i < gridRows; i++) { 
 

 
    for (var j = 0; j < gridColumns; j++) { 
 
     gridSandBoxSrcDoc += '<div></div>' + "\n"; 
 
    } 
 
} 
 

 
gridSandBoxSrcDoc += '</div>' + "\n"; 
 

 
gridSandbox.setAttribute('srcdoc', gridSandBoxSrcDoc); 
 
} 
 

 

 
var gridGenerator = document.getElementsByClassName('grid-generator')[0]; 
 
gridGenerator.addEventListener('change', updateGridStyles, false); 
 
window.addEventListener('load', updateGridStyles, false);

.grid-generator, 
 
fieldset { 
 
width: 470px; 
 
} 
 

 
.grid-sandbox { 
 
position: absolute; 
 
top: 6px; 
 
right : 6px; 
 
width: calc(100vw - 544px); 
 
height: 96vh; 
 
border: none; 
 
} 
 

 
label { 
 
display: inline-block; 
 
width: 230px; 
 
height: 36px; 
 
line-height: 24px; 
 
} 
 

 
textarea { 
 
width: 300px; 
 
height: 200px; 
 
}

<h2>Open to Full page...</h2> 
 
<form class="grid-generator"> 
 
<fieldset> 
 
<legend>Grid Width</legend> 
 
<label>Quantity: <input class="width-quantity" type="number" min="1" value="60" /></label> 
 
<label>Units: 
 
<select class="width-units"> 
 
<option value="px">px</option> 
 
<option value="em">em</option> 
 
<option value="rem">rem</option> 
 
<option value="vw" selected>vw</option> 
 
<option value="vh">vh</option> 
 
<option value="vmax">vmax</option> 
 
<option value="vmin">vmin</option> 
 
</select> 
 
</label> 
 
</fieldset> 
 

 
<fieldset> 
 
<legend>Grid Height</legend> 
 
<label>Quantity: <input class="height-quantity" type="number" min="1" value="60" /></label> 
 
<label>Units: 
 
<select class="height-units"> 
 
<option value="px">px</option> 
 
<option value="em">em</option> 
 
<option value="rem">rem</option> 
 
<option value="vw" selected>vw</option> 
 
<option value="vh">vh</option> 
 
<option value="vmax">vmax</option> 
 
<option value="vmin">vmin</option> 
 
</select> 
 
</label> 
 
</fieldset> 
 

 
<fieldset> 
 
<legend>Grid Dimensions</legend> 
 
<label>Columns: <input class="columns" type="number" min="1" value="2" /></label> 
 
<label>Rows: <input class="rows" type="number" min="1" value="2" /></label> 
 
</fieldset> 
 

 
<fieldset> 
 
<legend>CSS Grid Styles</legend> 
 
<textarea class="grid-styles"> 
 
.grid { 
 
    display: grid; 
 
    width: ; 
 
    height: ; 
 
    grid-template-columns: ; 
 
    grid-template-rows: ; 
 
    grid-template-areas: 
 
    ""; 
 
} 
 
</textarea> 
 
</fieldset> 
 
</form> 
 

 
<iframe class="grid-sandbox" srcdoc=" 
 
<style> 
 
</style> 
 
<div class=&quot;grid&quot;> 
 
</div> 
 
"> 
 
</iframe>