grid in ccss

1/*
2Most Common Grid properties:
3
4display: grid; 
5display: inline-grid; for applying inline property on grid
6grid-template-rows: 
7grid-template-columns: 
8grid-auto-flow: dense;
9grid-column-start: 2;
10grid-column-end: 4;
11grid-row-start: 1;
12grid-row-end: 3;
13justify content
14align items
15
16fr = fill up any available space
17auto-fit= stretch the cards to fill up the screen 
18auto-fill= create extra virtual cards to fill up the screen
19*/
20.grid{
21  display: grid;
22  grid-template-columns: repeat(3, minmax(auto, 1fr));
23  grid-template-rows: repeat(2, 200px);
24  grid-gap: 10px;
25}
26  

1.container {
2  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
3  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
4}