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

Question

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

有点像这个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>