flexbox grid

by rdenver6

HTML

<div class="container">
          <div class="grid-row">
            <div class="grid-item">
             <div class="grid-item-wrapper">
                <div class="grid-item-container">
                  BOX 1
                </div>
              </div>
            </div>
            <div class="grid-item">	   
              <div class="grid-item-wrapper">
                <div class="grid-item-container">
                  BOX 2
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="grid-item-wrapper">
                <div class="grid-item-container">
                  BOX 3
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="grid-item-wrapper">
                <div class="grid-item-container">
                  BOX 4
                </div>
              </div>
            </div>

        </div>
	</div>

CSS

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.grid-item {
  height: 280px;
  flex-basis: 25%;
  -ms-flex: auto;
  width: 290px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

.grid-item-wrapper {
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
  background: #aaa;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.grid-item-container {
 /* height: 100%;
  width: 100%;
  position: relative;*/
}

@media(max-width: 1024px) {
   .grid-item {
    flex-basis: 50%;
  }
}


@media(max-width: 400px) {
  .grid-item {
    flex-basis: 100%;
  }
}