Как расположить блоки?

/* файл стилей css*/
.one1 { /* класс главного родительского блока для четырёх разноцветных*/
    height:200px;/*высота*/
    width: 200px;/*ширина*/
    border:1px solid black; /*бордюр, рамка*/
    background: yellow; /*цвет фона*/
    position: relative; /* позиционирование  относительно исходного места left, top, right и bottom изменяет позицию*/
}
 
.green1 {/*класс зелёного квадрата*/
    height:100px;
    width: 100px;
    background: green;
    position: relative;
}
 
 
  .black1 { /*класс чОрного квадрата*/
    height: 100px;
    width: 100px;
    background: black;
    position: relative;
} 
 
 .white1 {/*класс белого квадрата*/
    height:100px;
    width: 100px;
    background: white;
    position: relative;
    left: 100px;
    bottom: 200px;
}
 
 
 
 
 .brown1 {
    height: 100px;
    width: 100px;
    background: brown;
    position: relative;
    left: 100px;
    bottom: 200px;
}
 
 
 
 
 
.grey1 {/*класс здоровенного сегого прямоугольника*/
    border:1px solid black; /*бордюр, рамка*/
    height: 200px;
    width: 560px;
    background: grey;
    position: relative;
    left:220px;
    bottom: 202px;
}
 
 
.red1 {/*класс здорового красного прямоугольника*/
    height:140px;
    width: 500px;
    background: red;
    position: relative;
    left:30px;
    top:30px;
}
 
 
 
 
.blue1{ /*класс синего квадрата, с ним проблема*/
    height:150px;
    width: 150px;
    background: blue;
    position: absolute;
    left:  140px;
    top: 160px;   
}
   
 
.blue2 {
    height:150px;
    width: 150px;
    background: blue;
    position: absolute;
    left:  300px;
    top: 160px; 
}
 
 
.blue3 {
    height:150px;
    width: 150px;
    background: blue;
    position: absolute;
    left:  460px;
    top: 160px; 
    }