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}