malep2007/grid_css.css

## grid_css.css
.container {
    display: grid;
    grid-template-columns: (12, 1fr);
    grid-auto-rows: 50px;
}

.cell {
 border: 1px solid black;
}

.one {
    grid-column: 1 / 12;
    grid-row: 1;
    border: 1px solid rebeccapurple;
  }
  .two {
    grid-column: 1 / 2;
    grid-row: 2;
    border: 1px solid rebeccapurple
  }
  .three {
    grid-column: 2/4;
    grid-row: 2 / 5;
    border: 1px solid red;
  }
  .four {
    grid-column: 4/7;
    grid-row: 2;
    border: 1px solid red;
  }
  .five {
    grid-column: 7/9;
    grid-row: 2;
    border: 1px solid red;
  }
  .six {
    grid-column: 9/12;
    grid-row: 2;
    border: 1px solid red;
  }

  .level {
      grid-column: 2/4;
      grid-row: 5/8;
      border: 1px solid rebeccapurple;
  }

  .rendered-content {
      grid-column: 4/12;
      grid-row: 3/8;
      border: 1px solid red;
  }

  .button-save{
      grid-column: 1/12;
      grid-row: 8;
      border: 1px solid rebeccapurple;
      display: flex;
  }

  .button-save-content{
      align-content: flex-end
  }
  .footer {
    grid-column: 1/12;
    grid-row: 9/12;
    border: 1px solid rebeccapurple;
  }

## grid_test.html
<html>
<head>
<title>Grid test</title>
<link rel="stylesheet" href="grid_css.css" type="text/css"/>
</head>
<body>
<div class="container">
    <div class="one">Header</div>
    <div class="two">Margin</div>
    <div class="three">Picture Frame</div>
    <div class="four">Personal Information</div>
    <div class="five">Financials</div>
    <div class="six">Transactions</div>
    <div class="level">Level</div>
    <div class="rendered-content">Rendered Components</div>
    <div class="button-save">
        <div class="button-save-content">
            <button>Save</button>
        </div>
    </div>
    <div class="footer">Footer Area</div>
</div>

</body>
</html>
	.container {
	display: grid;
	grid-template-columns: (12, 1fr);
	grid-auto-rows: 50px;
	}

	.cell {
	border: 1px solid black;
	}

	.one {
	grid-column: 1 / 12;
	grid-row: 1;
	border: 1px solid rebeccapurple;
	}
	.two {
	grid-column: 1 / 2;
	grid-row: 2;
	border: 1px solid rebeccapurple
	}
	.three {
	grid-column: 2/4;
	grid-row: 2 / 5;
	border: 1px solid red;
	}
	.four {
	grid-column: 4/7;
	grid-row: 2;
	border: 1px solid red;
	}
	.five {
	grid-column: 7/9;
	grid-row: 2;
	border: 1px solid red;
	}
	.six {
	grid-column: 9/12;
	grid-row: 2;
	border: 1px solid red;
	}

	.level {
	grid-column: 2/4;
	grid-row: 5/8;
	border: 1px solid rebeccapurple;
	}

	.rendered-content {
	grid-column: 4/12;
	grid-row: 3/8;
	border: 1px solid red;
	}

	.button-save{
	grid-column: 1/12;
	grid-row: 8;
	border: 1px solid rebeccapurple;
	display: flex;
	}

	.button-save-content{
	align-content: flex-end
	}
	.footer {
	grid-column: 1/12;
	grid-row: 9/12;
	border: 1px solid rebeccapurple;
	}
	<html>
	<head>
	<title>Grid test</title>
	<link rel="stylesheet" href="grid_css.css" type="text/css"/>
	</head>
	<body>
	<div class="container">
	<div class="one">Header</div>
	<div class="two">Margin</div>
	<div class="three">Picture Frame</div>
	<div class="four">Personal Information</div>
	<div class="five">Financials</div>
	<div class="six">Transactions</div>
	<div class="level">Level</div>
	<div class="rendered-content">Rendered Components</div>
	<div class="button-save">
	<div class="button-save-content">
	<button>Save</button>
	</div>
	</div>
	<div class="footer">Footer Area</div>
	</div>

	</body>
	</html>