Jak to zrobić — mieszany układ kolumn
Dowiedz się, jak utworzyć mieszaną siatkę układu kolumn z CSS.
Dowiedz się, jak utworzyć responsywny układ kolumn, który waha się między 4 kolumnami, 2 kolumnami i kolumnami o pełnej szerokości w zależności od szerokości ekranu.
Zmień rozmiar okna przeglądarki, aby zobaczyć efekt responsywności:
Jak stworzyć mieszany układ kolumn
Krok 1) Dodaj kod HTML:
Przykład
<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 czterokolumnowy, który przekształci się w dwie kolumny na ekranach o szerokości mniejszej niż 900px. Jednak na ekranach o szerokości mniejszej niż 600 pikseli kolumny będą układać się jedna na drugiej, zamiast unosić się obok siebie.
Przykład
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Wskazówka: przejdź do naszego samouczka CSS dotyczącego układu witryny , aby dowiedzieć się więcej o układach witryny.
Wskazówka: przejdź do naszego samouczka CSS Responsive Web Design , aby dowiedzieć się więcej o responsywnym projektowaniu stron internetowych i siatkach.