.grid-3col-centered {
display: grid;
grid-template-columns: auto auto auto;
place-items:center;
}
/* use a grid layout
3 col - auto distribute col_width
center vertically and horizontally
*/
Goal: Parent DIV centers one child element. Works with resizeable parent.
.super-centered {
display: grid;
place-items:center;
}
/* use a grid layout
center vertically and horizontally
grid-template-columns: auto;
// applied by default
*/
.grid-repeat {
display: grid;
grid-gap: 1rem;
grid-template-columns:
repeat(auto-fit, minmax(150px, 1fr));
}
/* a. repeat apply parameters to all children
b. auto-fit - CSS engine computes the largest
number of grid tracks such that
the container contains grid tracks without
overflow;
-- also then the CSS engine collapses any
emtpy grid track.
Each grid track contains exactly one
child-element.
c. CSS engine computes computes minimum child
width as 150px
d. compute max child width as 1fr
Note: (1fr == 1 flex-factor)
- Each <flex>-sized track takes a
share of the remaining space in proportion
to its flex factor (1fr).
*/