css display grid

1.parent{
2  display: grid;
3  grid-template-columns: repeat(3, 250px);
4  /*
5    instead of writing 250px 250px 250px 3 times, we use repeat(number of columns, width) function
6  */
7  grid-template-rows: repeat(3, 400px);
8}
9.parent .child-1{
10  grid-column: 2 / 4; /* Start at column 2 and end at column 3, 4 not counted [not inlcuded]*/
11  grid-row: span 2; /* take only 2 rows. can be written also as [grid-row: 1 / 3]*/
12}
13.parent .child-2{
14  grid-column: span 3;
15  grid-row: 1 / 3; /* 2 rows */
16}
17/*
18  ShortHand
19  grid-column: grid-column-start grid-column-end
20  grid-row: grid-row-start grid-row-end
21  Example: 
22    *grid-column: 2 / 8; start at 2 and end at 8-1 = 7
23    => grid-column-start = 2, grid-column-end = 7
24*/

1grid-template-rows: repeat(4, 100px);
2grid-template-columns: repeat(3, 1fr);

1grid-template-columns: auto auto auto;

1.item-a {
2  grid-area: header;
3}
4.item-b {
5  grid-area: main;
6}
7.item-c {
8  grid-area: sidebar;
9}
10.item-d {
11  grid-area: footer;
12}
13
14.container {
15  display: grid;
16  grid-template-columns: 50px 50px 50px 50px;
17  grid-template-rows: auto;
18  grid-template-areas: 
19    "header header header header"
20    "main main . sidebar"
21    "footer footer footer footer";
22}

1.item-a {
2  grid-column: 1;
3  grid-row: 1 / 3;
4}
5.item-e {
6  grid-column: 5;
7  grid-row: 1 / 3;
8}

1[class^="box-"] {
2  background-color: skyblue;
3
4/* To place the letter at the center */
5  display: grid;
6  place-items: center;
7}
8