css grid example

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.container {
2  display: grid | inline-grid;
3}