Grids

In the MIZ framework, the second method for creating grids is by using the grid property in CSS. This method allows you to utilize the power and flexibility of CSS Grid to organize content. With specific MIZ classes, you can easily create complex and responsive grids.

Basic Grid Classes Using Grid #

In this method, you first need to apply the d-grid class to the parent element to set the display property to grid. Then, apply classes like g-1, g-sm-2, g-lg-5, etc., to the child elements to specify the number of columns.

How to Use #

To use grid classes in the second method, follow these steps:

1. Apply the d-grid class to the parent element:

2. Apply grid classes to the child elements:

                

                    
                    
HTML
                    
                
                <div class="d-grid">
    <!-- Children go here -->
</div>

                    <div class="d-grid g-1">
  <div>
    <!-- Content of the first column -->
  </div>
  <div>
    <!-- Content of the second column -->
  </div>
</div>
                    

                        
                        
HTML
                        
                    
                  

Practical Examples #

Example 1: A Row with One Column

                    

                    
HTML

                    <div class="d-grid p-2 w-100 border-primary-color border-solid border-width-2 all-border-small">
    <div class="bg-on-primary-color all-border-small">
        <p class="text-color secondary-text-color txt-title txt-center">g-1</p>
    </div>
</div>
                

Example 2: A Row with Two Columns in Small Sizes and Five Columns in Large Sizes

                    

                    
HTML

                    <div class="d-grid g-md-2 g-lg-5 g-3 gap-2 p-2 w-100 border-primary-color border-solid border-width-2 all-border-small">
    <div class="bg-on-primary-color all-border-small">
        <p class="text-color secondary-text-color txt-title txt-center">g-1</p>
    </div>
    <div class="bg-on-primary-color all-border-small">
        <p class="text-color secondary-text-color txt-title txt-center">g-1</p>
    </div>
</div>
                

                        

                        

                            
                            
HTML
                            
                        
                        <div class="d-grid g-2 gap-1 w-100">
    <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
        <p>1 of 2</p>
    </div>
    <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
        <p>2 of 2</p>
    </div>
    <div class="d-grid g-3 gap-1 w-100">
        <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
            <p>1 of 3</p>
        </div>
        <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
            <p>2 of 3</p>
        </div>
        <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
            <p>3 of 3</p>
        </div>
    </div>
    <div class="d-grid g-4 gap-1 w-100">
        <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
            <p>1 of 4</p>
        </div>
        <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
            <p>2 of 4</p>
        </div>
        <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
            <p>3 of 4</p>
        </div>
        <div class="d-flex flex-column justify-content-center align-items-center bg-primary-color on-primary-color px-2 py-1">
            <p>4 of 4</p>
        </div>
    </div>
</div>

Custom Settings #

Grid classes in this method are defined as follows in miz/sass/config/_responsive.scss

                  $conf-grids:(
    count:14,
    responsive:true
);
                  

                    
SCSS
                    
                  
                

These classes can be customized based on your specific needs to set the desired number of columns.

Using CSS Grid in MIZ allows you to create complex and responsive designs. By combining different classes, you can create layouts that display well on various screen sizes.

Key Points #

• Power and Flexibility: CSS Grid offers powerful tools for organizing content, allowing you to create highly flexible and diverse layouts.
• Ease of Use: With the ready-made MIZ classes, you can easily utilize the capabilities of CSS Grid without needing to write complex code.

Conclusion #

Using the second method for creating grids in MIZ with the grid property in CSS is a powerful and flexible way to organize content. This method allows you to easily create complex and responsive grids and take advantage of CSS Grid's power for your designs.