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;