Responsiivinen laatta ilman välejä CSS:llä

Tehdään laatat, joissa on eri määrä lohkoja rivillä riippuen näytön leveydestä. Tässä on esimerkki siitä, mitä meidän pitäisi saada aikaan:

Kirjoitetaan ensin HTML-koodi:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
</div>

Lisätään nyt tyylit lohkojen vanhemmalle:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 50px auto;
}

Asetetaan nyt tyylit itse lohkoille, antamatta niille leveyttä:

css.child {
  box-sizing: border-box;
  height: 100px;
  padding: 20px;
  border: 1px solid green;
}

On ilmeistä, että lohkojen leveyden tulee olla prosentteina, jotta lohkot muuttuisivat sulavasti näytön muuttuessa. Tietyissä näytön kohdissa meidän on muutettava lohkojen leveyttä siten, että riville mahtuu tietty määrä näitä lohkoja.

Kirjoitetaan koodi, joka asettaa neljä lohkoa peräkkäin:

css@media (min-width: 1000px) {
  .child {
    width: 25%;
  }
}

Asetetaan nyt kolme lohkoa peräkkäin:

css@media (min-width: 700px) and (max-width: 1000px) {
  .child {
    width: 33.3333%;
  }
}

Asetetaan nyt kaksi lohkoa peräkkäin:

css@media (min-width: 400px) and (max-width: 700px) {
  .child {
    width: 50%;
  }
}

Yksi lohko peräkkäin:

css@media (max-width: 400px) {
  .child {
    width: 100%;
  }
}

Kootaan kaikki koodi yhteen:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 50px auto;
}
.child {
  box-sizing: border-box;
  height: 100px;
  padding: 20px;
  border: 1px solid green;
}

@media (max-width: 400px) {
  .child {
    width: 100%;
  }
}
@media (min-width: 400px) and (max-width: 700px) {
  .child {
    width: 50%;
  }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .child {
    width: 33.3333%;
  }
}
@media (min-width: 1000px) {
  .child {
    width: 25%;
  }
}