Simple Matrix of DIVs

Placing DIVs, depending on the screen size

by Ovi Stof

HTML

<div class="row">
      <div>square 1.1</div>
      <div>square 1.2</div>
      <div>square 1.3</div>
    </div>
    <div class="row">
      <div>square 2.1</div>
      <div>square 2.2</div>
      <div>square 2.3</div>
    </div>
    <div class="row">
      <div>square 3.1</div>
      <div>square 3.2</div>
      <div>square 3.3</div>
    </div>

CSS

* {
	box-sizing: border-box;
	}   
      .row{
        width: 50%;
        margin:0 auto;
      }
      .row div{
        float:left;
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 5px solid red;
        margin: 10px;
        box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.5);
      }