Flexbox helped out... but is only really intended for one-dimensional layouts
css-tricks.com/snippets/css/complete-guide-grid
.item-a{
grid-area: header;
}
.item-b{
grid-area: main;
}
.item-c{
grid-area: sidebar;
}
.item-d{
grid-area: footer;
}
Once we have our grid container set-up...
GRID
FACTS!
Grid areas are not at risk of overflowing its content into others
However... it is possible to layer grid areas
Flexbox can re-order components in a single row or column...... cute
Grid can change positions of any content around the whole page!
fraction of available space
Think flex-grow and flex-shrink
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
.item-a{
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3
}