grid is a two-dimensional. It lets you lay content out in rows and columns. It has many features that make building complex layouts straightforward. To define a grid we use the grid value of the display property. As with Flexbox, this enables Grid Layout; all of the direct children of the container become grid items. let's check by example:
.container {
display: grid;
}
we can also write like this; You can use any length unit or percentage to create these column tracks. let's add 3 columns of 100 px;
.container {
display: grid;
grid-template-columns: 100 px,100px,100px ;
}
This property is a shorthand for the following CSS properties:
1. grid-template -rows: defines the line names and track sizing functions of the grid rows. for example.
grid-template-rows: 100px 1fr;
2.grid-template-columns: defines the line names and track sizing functions of the grid columns.
grid-template-columns: repeat(3, 200px);
3.grid-template-areas: A grid area is one or more grid cells that make up a rectangular area on the grid. Grid areas are created when you place an item using line-based placement or when defining areas using named grid areas.
.item1 {
grid-area: a;
}
4.grid-auto -columns: The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;
5.grid -auto-row: The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.
grid-auto-rows: auto;
6.grid-auto-flow: The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
keep learning!