CardLayout

Css-grid responsive layout

Goals:

1. Responsive grid layout using named columns and rows for readability;
2. Use css variables;
3. Add multiple color themes;
4. Test cross-browser support;

Things I've learned:

1. Css-variables are cool, but should not be used excessively (more than one occurance);
2. It's ok to store other things but color values;
3. Css grid is cool, but should be used separately in containers (don't use one giant wrapper (unless layout is simplistic));
4. Auto-fit, auto, min- and max-content are super cool. Use them instead of fr when possible;
5. grid-template-areas are good alternative to named columns, but decided to not use them;
6. Rems are good. Rems > px;
7. There can be multiple shadows on one element? Unbelievable!