Sådan oprettes: Blandet kolonne layout

Forrige side Liste gitter visning
Næste side Kolonne kort

Lær hvordan man bruger CSS til at oprette en blanding af kolonner layout netværk.

Lær hvordan man opretter en responsiv kolonne layout, der kan ændre sig mellem fire kolonner, to kolonner og fuld bredde kolonner baseret på skærmens bredde.

Juster browservinduets størrelse for at se responsiv effekt:

Prøv det selv

Sådan oprettes en blanding af kolonner

Første trin - Tilføj HTML:

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

Andet trin - Tilføj CSS:

I dette eksempel vil vi oprette en firekolonnelayout, der konverteres til to kolonner, når skærmens bredde er mindre end 900 pixels. Men når skærmens bredde er mindre end 600 pixels, vil kolonnerne stå ved siden af hinanden i stedet for at være ved siden af hinanden.

/* Opret fire ensbreddede kolonner, der flyder sammen */
.column {
  float: left;
  width: 25%;
}
/* Ryd flydende */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Responsiv layout - ændrer layout til to kolonner i stedet for fire kolonner */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Responsiv layout - lader to kolonner at stå ved siden af hinanden i stedet for at være ved siden af hinanden */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prøv det selv