<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="./main.css" /> </head> <body> <div class="dashboard"> </div> <div class="container"> <header></header> <section class="sidebar"></section> <main></main> <footer></footer> </div> </body> </html>
const JUSTIFY_ITEMS = ['stretch', 'start', 'end', 'center']; const ALIGN_ITEMS = ['stretch', 'start', 'end', 'center']; const JUSTIFY_CONTENT = [ 'stretch', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly' ]; const ALIGN_CONTENT = [ 'stretch', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly' ]; function changeAlignStyle(prop, value) { const el = document.querySelector('.container'); el.style[prop] = value; } function createRadio() { const fragment = document.createDocumentFragment(); [ { prop: 'justify-items', values: JUSTIFY_ITEMS }, { prop: 'align-items', values: ALIGN_ITEMS }, { prop: 'justify-content', values: JUSTIFY_CONTENT }, { prop: 'align-content', values: ALIGN_CONTENT } ].forEach(({ prop, values }) => { const row = document.createElement('div'); const title = document.createElement('h3'); title.textContent = prop; const radioJar = document.createElement('div'); values.forEach(value => { const label = document.createElement('label'); const name = document.createElement('span'); const radio = document.createElement('input'); label.style.marginRight = '1em'; name.textContent = value; radio.name = prop; radio.type = 'radio'; radio.onclick = () => changeAlignStyle(prop, value); [radio, name].forEach(v => label.appendChild(v)); radioJar.appendChild(label); }); [title, radioJar].forEach(v => row.appendChild(v)); fragment.appendChild(row); }); document.querySelector('.dashboard').appendChild(fragment); } createRadio();
html, body { margin: 0; padding: 0; height: 100%; } body { display: flex; flex-direction: column; height: 600px; } .container { flex: 1 1 0; display: grid; margin-top: 10px; background: #fefefe; grid-template-columns: 40% 40%; grid-template-rows: repeat(2, 40%); background: #f6f6f6; } header, footer, .sidebar, main { padding: 20px; box-sizing: border-box; } header { background: #ddd; } footer { background: #aaa; } .sidebar { background: #888; } main { background: #ccc; }