Grid Layout is a two-dimensional and flexbox is a one-dimensional
Grid’s approach is layout-first and Flexbox’ approach is content-first
Flexbox small-scale layouts Grid’s larger scale
Grid is Container-Based, Flexbox is Content-Based
Flexbox is best for arranging elements in either a single row, or a single column. Grid is best for arranging elements in multiple rows and columns.
.Flexbox achieves this using flex-grow and flex-shrink properties, and Grid achieves this using a combination of minmax and auto-fill functions inside the grid-template-columns property.
The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design
CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).
Track size values can be any non-negative, length value (px, %, em, etc.)
display: grid
display: inline-grid
grid-template-columns: 90px 50px 120px
grid-template-columns: 1fr 1fr 2fr
grid-template-columns: 3rem 25% 1fr 2fr
grid-template-rows: 50px 100px
The fr unit helps create flexible grid tracks. It represents a fraction of the available space in the grid container (works like Flexbox’s unitless values).
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
The minmax() function accepts 2 arguments: the first is the minimum size of the track and the second the maximum size
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px // 30px 1fr 1fr 1fr 30px
using the repeat() notation. This is useful for grids with items with equal sizes or many items. The repeat() notation accepts 2 arguments: the first represents the number of times the defined tracks should repeat, and the second is the track definition.
grid-row-gap: 20px;
grid-column-gap: 5rem;
// OR
grid-gap: 20px 5rem
grid-gap: 2rem // sets equal row and column gaps.
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
Or
grid-row: 2;
grid-column: 3 / 4;
grid-area: 2 / 2 / 3 / 3
grid-row: 2 / span 3;
grid-column: span 2;
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
grid-row is shorthand for grid-row-start and grid-row-end.
grid-column is shorthand for grid-column-start and grid-column-end.
grid-area is shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.
Grid lines can be named when defining the grid with the grid-template-rows and grid-template-columns properties. Line names can then be referenced to position grid items.
With named grid lines, items can be positioned by line names and numbers.
grid-template-areas: "header header"
"content sidebar"
"footer footer";
Or
grid-row-start: header;
grid-row-end: header;
grid-column-start: header;
grid-column-end: header;
The grid-area property can also be used to assign a name to a grid item
grid-auto-flow: row
grid-auto-flow: column
grid-template-columns: 30px 60px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
justify-items: start
align-items: center
justify-content: start;
place-self: center stretch;
auto
normal
start
end
center
stretch
baseline
first baseline
last baseline
justify-items and justify-self align items along the row axis, and align-items and align-self align items along the column axis.
justify-items and align-items are applied to the grid container and support the following values:
place-self sets both the align-self and justify-self properties in a single declaration.
grid: 100px 300px / 3fr 1fr;
A shorthand for setting all of the following properties in a single declaration: **grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow **
grid-template A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.
flex: 1 1 auto; /* Size of items defined inside items */ ->>>> for the child div
grid-template-columns: 1fr 1fr 1fr 1fr; /* Size of items defined inside container */ ->>>> for the parent div
grid-template-columns: 3fr 1fr; ->>>> first column 3 times bigger.
grid-template-rows: repeat(3,auto);/* The repeat() function creates 3 rows with auto height.*/
flex: 1 1 100px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); //create columns with minimum width 100px
grid-template-columns: 200px 50px 100px;
grid-template-rows: 50px 50px;