مولّد CSS Grid

أنشئ تخطيطات CSS Grid بصرياً. حدد الصفوف والأعمدة والفجوات وانسخ شفرة CSS وHTML الناتجة. يدعم وحدات fr وpx وauto.

CSS 

  




  


  
  

  
  
  
  

    
الميزات

    

      
      

        
        Row/column setup
      

      
      

        
        Drag to resize
      

      
      

        
        Cell merging
      

      
      

        
        Gap control
      

      
      

        
        Generate CSS + HTML
      

      
    

  

  

  
  

    
طريقة الاستخدام

    

      
        
        
1. حدد عدد الصفوف والأعمدة.

        
        
2. اضبط ارتفاعات الصفوف وعروض الأعمدة (fr، px، auto).

        
        
3. حدد فجوة الشبكة.

        
        
4. انسخ شفرة CSS وHTML المولّدة.

        
      
    

  


  
  
  
  

    
الأسئلة الشائعة

    
    

      What is CSS Grid?
      
CSS Grid is a two-dimensional layout system for creating complex grid-based layouts with rows and columns.

    

    
  

  

  
  
  

    
أدوات ذات صلة

    

      
      
        

          
        

        
مولّد ظل CSS

        
أنشئ خاصية box-shadow في CSS بصرياً باستخدام أشرطة التمرير. شاهد معاينة مباشرة و...

      
      
      
        

          
        

        
مولّد تدرجات CSS

        
أنشئ تدرجات CSS خطية وشعاعية ومخروطية بصرياً. أضف نقاط توقف ألوان متعددة وانسخ ش...

      
      
      
        

          
        

        
مولّد حواف CSS المستديرة

        
صمّم خاصية border-radius في CSS بصرياً — تحكم في الزوايا الأربع فردياً أو معاً. ...

      
      
      
        

          
        

        
ساحة تجارب CSS Flexbox

        
تعلّم وجرّب CSS Flexbox عملياً. اضبط خصائص الحاوية وشاهد تحديث التخطيط مباشرة. أ...