Hur man skapar: blandad kolumnlayout

Lär dig hur man skapar en blandad kolumnlayoutnät med CSS.

Lär dig hur man skapar en responsiv kolumnlayout som kan förändras mellan fyra kolumner, två kolumner och full bredd beroende på skärmbredd.

Justera storleken på webbläsarfönstret för att se responsiva effekter:

Prova själv

Hur man skapar en blandad kolumnlayout

Steg 1 - Lägg till HTML:

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

Steg 2 - Lägg till CSS:

I detta exempel skapar vi en fyra-kolumns layout som övergår till två kolumner när skärmbredden är mindre än 900 pixlar. Men när skärmbredden är mindre än 600 pixlar staplas kolumnerna, inte bredvid varandra.

/* Skapa fyra lika breda kolumner som flyter tillsammans */
.column {
  float: left;
  width: 25%;
}
/* Rensa flytande */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Responsiv layout - gör layout till två kolumner istället för fyra */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Responsiv layout - gör två kolumner staplade, inte bredvid varandra */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prova själv

Relaterade sidor

Tutorials:CSS webbplatslayout

Tutorials:CSS responsiv webbdesign