zuramai/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GRID</title>
    <style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(23,auto);
        grid-template-rows: repeat(8, auto) ;
        height: 100vh;
        width: 600px;
        max-width: 100%;
        margin: 0 auto;
        grid-gap: 5px;
    }
    .grid1 {
        grid-column: 1/12;
        padding: 0 0 10% 0px;
        background-color: #ffd701;
    }
    .grid2 {
        grid-column: 12/16;
        background-color: pink;
    }
    .grid3 {
        grid-column: 16/20;
        background-color: pink;
    }
    .grid4 {
        grid-column: 20/24;
        background-color: pink;
    }
    .grid5 {
        grid-column: 1/18;
        background-color: lightblue;
        grid-row-start: 2;
        padding: 0px 0px 3% 0px;
    }
    .grid6 {
        grid-column: 18/24;
        background-color: orange;
        grid-row: 2 / 4;
        grid-row-start: 2;
        padding: 0px 0px 3% 0px;
    }
    .grid7 {
        grid-column: 1/6;
        background-color: lightgreen;
        grid-row: 3/8;
    }
    .grid8 {
        grid-column: 6 / 18;
        grid-row: 3 / 5;
        background-color: #adadad;
        padding: 0px 0px 10% 0px;
    }
    .grid9 {
        grid-column: 18 / 24;
        grid-row: 4 / 6;
        background-color: #157e00;
    }
    .grid10 {
        grid-column: 6 / 18;
        grid-row: 5 / 8;
        background-color: yellow;
    }
    .grid11 {
        grid-column: 18 / 24;
        grid-row: 6 / 8;
        background-color: #ff4ed9;
    }
    .grid11 {
        grid-column: 18 / 24;
        grid-row: 6 / 8;
        background-color: #ff4ed9;
    }
    .grid12 {
        grid-column: 1 / 24;
        grid-row-start: 8;
        background-color: #a1887f;
    }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid1">Site Title</div>
        <div class="grid2">Nav 1</div>
        <div class="grid3">Nav 2</div>
        <div class="grid4">Nav 3</div>
        <div class="grid5">Post Title</div>
        <div class="grid6">Side Bar</div>
        <div class="grid7">Post Meta</div>
        <div class="grid8">Main Content</div>
        <div class="grid9">Ads</div>
        <div class="grid10">Main Content Image</div>
        <div class="grid11">Other Stuff</div>
        <div class="grid12">2018 Footer</div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS GRID</title>
	<style>
	.grid-container {
	display: grid;
	grid-template-columns: repeat(23,auto);
	grid-template-rows: repeat(8, auto) ;
	height: 100vh;
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
	grid-gap: 5px;
	}
	.grid1 {
	grid-column: 1/12;
	padding: 0 0 10% 0px;
	background-color: #ffd701;
	}
	.grid2 {
	grid-column: 12/16;
	background-color: pink;
	}
	.grid3 {
	grid-column: 16/20;
	background-color: pink;
	}
	.grid4 {
	grid-column: 20/24;
	background-color: pink;
	}
	.grid5 {
	grid-column: 1/18;
	background-color: lightblue;
	grid-row-start: 2;
	padding: 0px 0px 3% 0px;
	}
	.grid6 {
	grid-column: 18/24;
	background-color: orange;
	grid-row: 2 / 4;
	grid-row-start: 2;
	padding: 0px 0px 3% 0px;
	}
	.grid7 {
	grid-column: 1/6;
	background-color: lightgreen;
	grid-row: 3/8;
	}
	.grid8 {
	grid-column: 6 / 18;
	grid-row: 3 / 5;
	background-color: #adadad;
	padding: 0px 0px 10% 0px;
	}
	.grid9 {
	grid-column: 18 / 24;
	grid-row: 4 / 6;
	background-color: #157e00;
	}
	.grid10 {
	grid-column: 6 / 18;
	grid-row: 5 / 8;
	background-color: yellow;
	}
	.grid11 {
	grid-column: 18 / 24;
	grid-row: 6 / 8;
	background-color: #ff4ed9;
	}
	.grid11 {
	grid-column: 18 / 24;
	grid-row: 6 / 8;
	background-color: #ff4ed9;
	}
	.grid12 {
	grid-column: 1 / 24;
	grid-row-start: 8;
	background-color: #a1887f;
	}
	</style>
	</head>
	<body>
	<div class="grid-container">
	<div class="grid1">Site Title</div>
	<div class="grid2">Nav 1</div>
	<div class="grid3">Nav 2</div>
	<div class="grid4">Nav 3</div>
	<div class="grid5">Post Title</div>
	<div class="grid6">Side Bar</div>
	<div class="grid7">Post Meta</div>
	<div class="grid8">Main Content</div>
	<div class="grid9">Ads</div>
	<div class="grid10">Main Content Image</div>
	<div class="grid11">Other Stuff</div>
	<div class="grid12">2018 Footer</div>
	</div>
	</body>
	</html>