Miten luoda: sekasarakkeinen asettelu

Edellinen sivu Luettelo ruudukko näkymä
Seuraava sivu Sarakkeiden kortit

Opi, miten luoda sekasarakkeisen asettelun ruudukko CSS:llä.

Opi, miten luoda reagoiva sarakkeiden asettelu, joka voi muuttua neljästä, kahdesta ja täysleveästä sarakkeesta ruudun leveys riippuen.

Aseta selaimen ikkunan koko, nähdäksesi reagoivan asetelman:

Kokeile itse

Miten luoda sekasarakkeinen asettelu

Ensimmäinen vaihe - lisää HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Toinen vaihe - lisää CSS:

Tässä esimerkissä luomme neljasarakkeisen asetelman, joka muuttuu kahden sarakkeen asetelmaksi ruudun leveys pienenee alle 900 pikseliä. Mutta ruudun leveys alle 600 pikseliä, sarakkeet sijoittuvat rinnakkain eikä vartioituna.

/* Luo neljä yhtä leveää saraketta, jotka pyörivät yhdessä */
.column {
  float: left;
  width: 25%;
}
/* Poistaa pyörivän liikkeen */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Responaivinen asettelu - muuttaa asetelman kahdesta sarakkeesta neljään */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Responaivinen asettelu - asettaa kaksi saraketta rinnakkain eikä vartioituna */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Kokeile itse