x
1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>CloseTag</title>8
<style>9
*10
{11
box-sizing: border-box;12
}13
14
.grid-container15
{16
17
display:grid;18
width:100%;19
background-color: #2196F3;20
padding: 10px;21
}22
23
.row24
{25
border:white solid 1px;26
}27
28
.col-1 {width: 8.33%;}29
.col-2 {width: 16.66%;}30
.col-3 {width: 25%;}31
.col-4 {width: 33.33%;}32
.col-5 {width: 41.66%;}33
.col-6 {width: 50%;}34
.col-7 {width: 58.33%;}35
.col-8 {width: 66.66%;}36
.col-9 {width: 75%;}37
.col-10 {width: 83.33%;}38
.col-11 {width: 91.66%;}39
.col-12 {width: 100%;}40
41
header42
{43
height:100px;44
}45
46
footer47
{48
height:70px;49
}50
51
.slider52
{53
height:200px;54
}55
56
.content57
{58
height:300px;59
}60
61
[class*="col-"]62
{63
border: 1px dashed blue;64
background-color: rgba(255, 255, 255, 0.8);65
float: left;66
}67
68
@media only screen and (max-width: 768px) {69
/* For mobile phones: */70
[class*="col-"]71
{72
width: 100%;73
}74
}75
76
@media only screen and (min-width: 768px) 77
{78
/* For desktop: */79
.col-1 {width: 8.33%;}80
.col-2 {width: 16.66%;}81
.col-3 {width: 25%;}82
.col-4 {width: 33.33%;}83
.col-5 {width: 41.66%;}84
.col-6 {width: 50%;}85
.col-7 {width: 58.33%;}86
.col-8 {width: 66.66%;}87
.col-9 {width: 75%;}88
.col-10 {width: 83.33%;}89
.col-11 {width: 91.66%;}90
.col-12 {width: 100%;}91
}92
</style>93
</head>94
<body>95
<div class="grid-container">96
<div class="row">97
<header class="col-12">98
<div>Header</div>99
</header>100
</div>101
<div class="row">102
<div class="col-12 slider">103
<div>Slider</div>104
</div>105
</div>106
<div class="row">107
<div class="col-6 content">108
<div>Content left</div>109
</div>110
<div class="col-6 content">111
<div>Content right</div>112
</div>113
</div>114
<div class="row">115
<footer class="col-12">116
<div>Footer</div>117
</footer>118
</div>119
</div>120
</body>121
</html>