css grid

1/* Answer to: "css grid mdn" */
2
3/*
4  The grid CSS property is a shorthand property that sets all of
5  the explicit grid properties (grid-template-rows,
6  grid-template-columns, and grid-template-areas), and all the
7  implicit grid properties (grid-auto-rows, grid-auto-columns, and
8  grid-auto-flow), in a single declaration.
9
10  For more information, go to:
11  https://developer.mozilla.org/en-US/docs/Web/CSS/grid
12*/

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.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<div class="grid-container">
2  <div class="grid-item">1</div>
3  <div class="grid-item">2</div>
4  <div class="grid-item">3</div>  
5  <div class="grid-item">4</div>
6  <div class="grid-item">5</div>
7  <div class="grid-item">6</div>  
8  <div class="grid-item">7</div>
9  <div class="grid-item">8</div>
10  <div class="grid-item">9</div>  
11</div>
12
13.grid-container {
14  width: 300px;
15  height: 300px;
16  display: grid;
17  grid-template-columns: auto auto auto;
18  place-items: center;
19}
20
21.grid-item {
22  background-color: silver;
23  width: 50px;
24  height: 50px;
25  display: flex;
26  justify-content: center;
27  align-items: center;
28}

1
2  grid: none|grid-template-rows / 
3  grid-template-columns|grid-template-areas|grid-template-rows 
4  / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;