Code: [ Select all ]
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#000;
}
.item1 { grid-area: pic; }
.item2 { grid-area: body; }
.item3 { grid-area: status; }
.item4 { grid-area: mess; }
h1 {
color:#0F0;
}
.grid-container {
display: grid;
grid-template-areas:
'pic body status'
'mess mess mess';
grid-gap: 1px;
background-color: #777;
padding: 2px;
height: 185px;
width: 310px;
}
.grid-container > div {
background-color: #252525;
text-align: center;
padding: 10px 2px;
font-size: 30px;
color: #FFF;
}
.item1 {
width: 75px;
height: 115px;
}
.item2 {
width: 213px;
height: 115px;
}
.item3 {
width: 8px;
height: 115px;
background-color: #0F0 !important;
}
.item4 {
height: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<div class="grid-container">
<div class="item1">pic</div>
<div class="item2">Menu</div>
<div class="item3"> </div>
<div class="item4">Right</div>
</div>
</body>
</html>