Bigger apps group similar values, like the names of your friends in a social network.

<html>
<head>
<style>
.gridContainer {
display: grid;
grid-row-gap: 10px;
grid-template-columns: 300px;
grid-template-rows: 140px 50px 50px 50px;
}

.gridItem {
background-color: white;
border: 1px;
border-radius: 5px;
padding-top: 5px;
padding-left: 10px;
font-size: 20px;
}

.gridItem.tom {
text-align: left;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.gridItem.mia {
text-align: left;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.gridItem.lee {
text-align: left;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
}

body {
background-color: #bfdaf9;
display:flex;
justify-content: center;
}

.gridItem img {
float: left;
height: 30px;
width: 30px;
margin-right: 10px;
}

p {
margin: 0px;
font-size: 25px;
padding-top: 7px;
color: #3e416d;
}

#meDiv {
border: 1px;
border-radius: 5px;
background-color: white;
text-align: center;
display: block;
}

#me {
height: 137px;
width: 137px;
}

#lee {
height: 26px;
width: 26px;
}
</style>
</head>
<body>
<div class="gridContainer">
<div id="meDiv">
<img src="https://mimo.app/i/tom.png" id="me">
</div>
<div class="gridItem tom">
<p><img src="https://mimo.app/i/elijah.png">Tom</p>
</div>
<div class="gridItem mia">
<p><img src="https://mimo.app/i/portrait-cv.png">Mia</p>
</div>
<div class="gridItem lee">
<p><img src="https://mimo.app/i/lee.png" id="lee">Lee</p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>]]>