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
height: 320px;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
[class*="col-"]42
{43
border-right: 2px dashed grey;44
height: 100%;45
background-color: rgba(255, 255, 255, 0.8);46
float: left;47
}48
</style>49
</head>50
<body>51
<div class="grid-container">52
<div class="row">53
<div class="col-3"></div>54
<div class="col-3"></div>55
<div class="col-3"></div>56
<div class="col-3"></div>57
</div>58
</div>59
</body>60
</html>