Μετάβαση στο κύριο περιεχόμενο
LibraTool logoLibraTool

Γεννήτρια CSS Grid δωρεάν

Σχεδιάστε οπτικά ένα CSS grid — tracks, units και gaps — και αντιγράψτε το generated CSS και HTML.

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί
Προσυντάξεις
Στήλες (3)
Σειρές (2)
Ζωντανή προεπισκόπηση
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Τα πάντα εκτελούνται στο πρόγραμμα περιήγησής σας — δεν φορτώνεται τίποτα.

Πώς λειτουργεί

Σχεδιάστε ένα CSS grid οπτικά: προσθέστε έως 8 στήλες και 8 γραμμές, ορίστε κάθε track σε fr, px, auto ή min/max-content και ρυθμίστε τα κενά γραμμών/στηλών. Η αριθμημένη ζωντανή προεπισκόπηση ενημερώνεται αμέσως και το παραγόμενο CSS grid-template μαζί με το αντίστοιχο HTML απέχουν ένα κλικ από το πρόχειρο.

  1. 1
    Διαμορφώστε το πλέγμα
    Προσθέστε/αφαιρέστε στήλες και γραμμές με + και −.
  2. 2
    Ορίστε τα tracks
    Κάθε στήλη και γραμμή παίρνει δική της μονάδα (1fr, 100px, auto…).
  3. 3
    Ρυθμίστε τα κενά
    Ξεχωριστά ρυθμιστικά row-gap και column-gap.
  4. 4
    Αντιγράψτε τον κώδικα
    CSS έτοιμο για παραγωγή και ο αντίστοιχος σκελετός HTML.

Όλα εκτελούνται στον browser σας — τίποτα δεν μεταφορτώνεται.

Σχετικά εργαλεία

↔️

Γεννήτρια CSS Flexbox

Πειραματιστείτε με κατεύθυνση flex, wrap, justify και align σε ζωντανά στοιχεία — και αντιγράψτε το CSS.

Δοκιμάστε το
📐

Γεννήτρια CSS clamp()

Δημιουργήστε μια ρευστή τιμή CSS clamp() για ανταποκρινόμενη τυπογραφία και απόσταση. Ορίστε ελάχιστο/μέγιστο μέγεθος και εύρος παρατηρητικής θύρας, δείτε ζωντανή προεπισκόπηση και αντιγράψτε το CSS.

Δοκιμάστε το
📓

Εκτυπώσιμο χαρτί — Γραμμωτό, τετραγωνισμένο, με κουκκίδες και χαρτί μουσικής (PDF)

Εκτυπώστε το δικό σας χαρτί: γραμμωτό (πλατιές ή college γραμμές), τετραγωνισμένο, με κουκκίδες, ισομετρικό, εξάσκηση γραφής, πεντάγραμμο ή σημειώσεις Cornell, σε A4, Letter, A5 ή Legal, με οποιοδήποτε χρώμα γραμμής και όσες σελίδες χρειάζεστε. Ένα καθαρό διανυσματικό PDF που φτιάχνεται στο πρόγραμμα περιήγησής σας.

Δοκιμάστε το

Συχνές ερωτήσεις