css grid tutorial

1<!-- HTML code -->
2<div class="wrapper">
3  <div class="box">A</div><div class="box">B</div><div class="box">C</div>
4  <div class="box">D</div><div class="box">E</div><div class="box">F</div>
5</div>
6
7<!-- Css code -->
8<style>
9.wrapper {
10  display: grid;
11  grid-template-columns: 100px 100px 100px;
12  grid-gap: 10px;
13  background-color: #fff;
14  color: #444;
15}
16.box {
17  background-color: #444;
18  color: #fff;
19  border-radius: 5px;
20  padding: 20px;
21  font-size: 150%;
22}
23</style>

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/* grid-column: <start> / <end>;  */
2/* grid-row: <start> / span <length>;  */
3/* i.e */
4grid-column: 3 / span 2;
5grid-row: 2 / 4;
6grid-row: 4;

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}

1.container {
2  display: grid | inline-grid;
3}