Flexbox
Flexbox es ideal para layouts unidimensionales (filas o columnas).
Dirección y Wrap
1
2
3
4
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
Justify Content
1
2
3
.container {
display: flex;
justify-content: flex-start;
}
Align Items
1
2
3
.container {
display: flex;
align-items: flex-start;
}
Grid
Grid es perfecto para layouts bidimensionales (filas y columnas).
Grid Básico
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
Grid Areas
Header
Sidebar
Main Content
Footer
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 1rem;
}