CSS Grid/Flexbox Generator

Visuell layoutbyggare för CSS Grid och Flexbox med realtidsförhandsvisning och kodgenerering

Kopierar layoutregler och HTML. Knapparna begränsar bredden utan media queries eller enhetsemulering. Historik med högst 50 poster. Färgerna är illustrativa.

Layout Byggare

Layout Kontroller

Live Förhandsvisning

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

CSS Kod

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

.item-1 {
}

.item-2 {
}

.item-3 {
}

.item-4 {
}

.item-5 {
}

.item-6 {
}

HTML Kod

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
  <div class="item-5">Item 5</div>
  <div class="item-6">Item 6</div>
</div>

Tips & Bästa Praxis

CSS Grid är perfekt för 2D-layouter. Använd det för komplexa sidlayouter, kortgitter och exakt positionering med rader och kolumner.

Använd responsiva brytpunkter för att skapa layouter som anpassar sig sömlöst till olika skärmstorlekar. Testa din layout på mobil, surfplatta och desktop.

Börja med en layoutmall och anpassa den efter dina behov. Mallar inkluderar vanliga mönster som header/sidebar/main, kortgitter och navigationsfält.

CSS Grid/Flexbox Generator

Kopierar layoutregler och HTML. Knapparna begränsar bredden utan media queries eller enhetsemulering. Historik med högst 50 poster. Färgerna är illustrativa.

Funktioner

  • CSS Grid
  • Flexbox
  • Kopiera CSS
  • Kopiera HTML
  • Kopierar layoutregler och HTML. Knapparna begränsar bredden utan media queries eller enhetsemulering. Historik med högst 50 poster. Färgerna är illustrativa.

Hur man använder

  1. Välj mellan CSS Grid eller Flexbox baserat på dina behov
  2. Konfigurera layoutegenskaper via den intuitiva kontrollpanelen
  3. Lägg till och positionera layoutobjekt
  4. Justera gridkolumner, rader, mellanrum och justering i realtid
  5. Förhandsgranska din layout över olika brytpunkter
  6. Finjustera med visuella rutnätslinjer
  7. Kopiera den genererade CSS-koden

Vanliga frågor

Vad är skillnaden mellan CSS Grid och Flexbox?

CSS Grid är designat för tvådimensionella layouter med rader och kolumner, perfekt för komplexa sidlayouter. Flexbox är designat för endimensionella layouter, idealiskt för navigationsfält och flexibel innehållsfördelning.