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

Question

Chrome，Firefox和Safari Technology Preview中支持CSS Grid，有没有人找到一个不错的CSS Grid生成器或配置器？

有点像这里的弹性框生成器：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>