Code Snippets

FLEX: Resize

.parent {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.content {
    flex: 1 1 150px; // no stretch
    flex: 0 1 150px; // stretch
    margin: 5px;
}

GRID: Center Items

.parent {
    display:grid;
    place-items:center;
}

GRID: minmax()

.parent {
    display:grid;
    grid-template-columns: minmax(150px, 25%), 1fr;
}

GRID: Stack

.parent {
    display:grid;
    grid-template-rows: auto 1fr auto;
}

GRID: template column/rows

.parent {
    display:grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

GRID: repeat

.parent {
    display:grid;
    grid-template-columns: repeat(12,1fr);
}
.content {
    grid-column: span 1/13; // span entire width    
    grid-column: span 1/7; // span first half width   
    grid-column: span 7/13; // span second half width   
}

GRID: repeat, auto, minmax

.parent {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(,1fr); // set  to size of single content
    grid-gap:1rem;
}

CSS: supports

@supports (display:grid) {
    section {
        display:grid;
    }
}
@supports not (display:grid) {
    section {
        float:right;
    }
}

const loadStylesheet = src => {
    const stylesheet = document.createElement('link')
    stylesheet.href=src
    stylesheet.type='text/css'
    document.getElementsByTagName('head')[0].appendChild(stylesheet)
}
window.addEventListener('load', e => {
    loadStylesheet('/css/postrender.css')
})

el.classList.add('show')
el.classList.remove('hide')

parent.appendChild(el)

el.getAttribute('tabindex')

// php