Jak stworzyć: mieszany układ kolumn

Naucz się, jak używać CSS do tworzenia mieszanych układów kolumn siatki.

Naucz się, jak stworzyć responsywny układ kolumn, który zmienia się między czterema, dwoma i pełną szerokością kolumn.

Zmieniaj rozmiar okna przeglądarki, aby zobaczyć efekty responsywne:

Spróbuj sam

Jak stworzyć mieszany układ kolumn

Krok 1 - Dodaj HTML:

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

Krok 2 - Dodaj CSS:

W tym przykładzie stworzymy układ czterech kolumn, który przy szerokości ekranu mniejszej niż 900 pikseli zmienia się na dwa kolumny. Ale przy szerokości ekranu mniejszej niż 600 pikseli kolumny będą układane jeden nad drugim zamiast obok siebie.

/* Tworzenie czterech równo szerokich kolumn, które będą razem płynąć */
.column {
  float: left;
  width: 25%;
}
/* Usuwanie飘浮 */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Responsywna layout - layout zmienia się z czterech kolumn na dwie */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Responsywna layout - kolumny są układane jeden nad drugim zamiast obok siebie */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Spróbuj sam

Strony związane

Kursy:Projektowanie strony internetowej CSS

Kursy:Projektowanie responsywnej strony internetowej CSS