<div class="kapsayici">
  <p>Bordo</p>
  <p>Mavi</p>
  <p>En büyük</p>
  <p>Trabzonspor</p>
</div>
.kapsayici {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50vh 50vh;
}

@media only screen and (min-width: 1024px) {
  .kapsayici {
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 100vh;
  } 
}

p:nth-child(odd) {
  background-color: blue;
}

p:nth-child(even) {
  background-color: crimson;
}

body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  color: white;
  padding: 20px;
}

body {
  font-size: 20px;
  font-family: 'Merriweather Sans', sans-serif;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800

External JavaScript

This Pen doesn't use any external JavaScript resources.