דלג לתוכן הראשי
LibraTool logoLibraTool

יוצר CSS Grid בחינם

עצב רשת CSS חזותית — מסלולים, יחידות ורווחים — והעתק את ה-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 חזותית: הוסף עד 8 עמודות ו-8 שורות, קבע לכל מסלול fr, px, auto או min/max-content, והתאם את הרווחים בין שורות/עמודות. התצוגה המקדימה החיה הממוספרת מתעדכנת מיד וה-CSS של grid-template שנוצר בתוספת HTML תואם הם לחיצה אחת מהלוח שלך.

  1. 1
    עצב את הרשת
    הוסף או הסר עמודות ושורות עם + ו-−.
  2. 2
    קבע את המסלולים
    לכל עמודה ושורה יש יחידה משלה (1fr, 100px, auto…).
  3. 3
    כוונן את הרווחים
    מחווני row-gap ו-column-gap נפרדים.
  4. 4
    העתק את הקוד
    CSS מוכן-לייצור ושלד HTML תואם.

הכול פועל בדפדפן שלך — שום דבר לא מועלה.

כלים קשורים

↔️

יוצר CSS Flexbox

נסו כיוון flex, עטיפה, justify ו-align בפריטים חיים — והעתיקו את ה-CSS.

נסה אותו
📐

מחולל CSS clamp()

צור ערך CSS clamp() נזיל לטיפוגרפיה ורווחים רספונסיביים. הגדר גודל מינימלי/מקסימלי וטווח viewport, ראה תצוגה מקדימה חיה, והעתק את ה-CSS בשורה אחת.

נסה אותו
📓

נייר להדפסה — שורות, משבצות, נקודות ופנקס תווים (PDF)

הדפיסו נייר משלכם: שורות (רחבות או college), משבצות, רשת נקודות, איזומטרי, תרגול כתב יד, חמשות לתווים או רשימות Cornell, בגודל A4, Letter, A5 או Legal, בכל צבע קו ובכמה עמודים שתצטרכו. PDF וקטורי חד שנוצר בדפדפן שלכם.

נסה אותו

שאלות נפוצות