grid css

1repeat(/*Number of repeats*/, /*Code to be repeated*/)
2
3.gridContainer {
4	grid-template-columns: repeat(4, 100px); /*Creates 4 columns, each 100px in width*/
5	grid-template-rows: repeat(2, 250px); /*Creates 2 rows, each 250px in height*/
6}

1.wrapper {
2  display: grid;
3  grid-template-columns: repeat(8, 1fr);
4  gap: 10px;
5  grid-auto-rows: 100px;
6  grid-template-areas:
7    "a a a a b b b b"
8    "a a a a b b b b"
9    "c c c c d d d d"
10    "c c c c d d d d";
11  align-items: start;
12}
13.item1 {
14  grid-area: a;
15}
16.item2 {
17  grid-area: b;
18}
19.item3 {
20  grid-area: c;
21}
22.item4 {
23  grid-area: d;
24}
25Copy to Clipboard
26<div class="wrapper">
27  <div class="item1">Item 1</div>
28  <div class="item2">Item 2</div>
29  <div class="item3">Item 3</div>
30  <div class="item4">Item 4</div>
31</div>
32Copy to Clipboard
33
34
35

1.container {
2  grid-template-columns: 1fx 1fr 1fr;
3  grid-template-rows: 80px auto 80px; 
4  column-gap: 10px;
5  row-gap: 15px;
6}

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.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.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}