Installation Link

Copy the following to the <head>of your HTML

<link rel="stylesheet" href="https://design-with-ira.netlify.app/installationLinks/grid.css">

Grid component is used to create a matrix of elements. Ira provides two basic column layouts for grid - grid foe two columns and grid for 3 columns. To implement this, add the grid-container class to the wrapper. To each child, give the grid-child class. Wrappers can be <div> or <section> elements. Child elements can be images, cards, etc.

To make a two column grid layout add the class grid-col2 to the wrapper. Similarly, to make a three column grid layout add the class grid-col3 to the wrapper.

Note: Borders are used only for dislay purpose

This is child 1

This is child 2

This is child 3

This is child 4

grid-demo grid-demo grid-demo grid-demo

This is child 1

This is child 2

This is child 3

This is child 4

grid-demo grid-demo grid-demo grid-demo

In addition to the basic grid layouts, Ira provides two more grid layouts.

Additional grid layouts

Use the above classes in the wrapper, in place of grid-cols2 or grid-cols3.

grid-fit and grid-fillfits as many children of specified size in one row of grid container. The difference between them is that grid-fit tries to maintain the gap in the columns as long as possible. If there are more children, it collapses its column gap and tries to fit the new children

grid-fill has no consideration for the column gaps, it removes the gap at the start and leaves empty spaces at the end of the row

grid-fit with less number of children

grid-demo grid-demo grid-demo grid-demo

grid-fill with less number of children

grid-demo grid-demo grid-demo grid-demo

grid-fit with more number of children

grid-demo grid-demo grid-demo grid-demo grid-demo grid-demo grid-demo grid-demo

grid-fill with more number of children

grid-demo grid-demo grid-demo grid-demo grid-demo grid-demo grid-demo grid-demo

The minimum and maximum width of the children can be adjusted using the following properties 

        
          :root{
            
            --width-min-grid-fit: <size>;
            
            --width-max-grid-fit: <size>;
            
            --width-min-grid-fill: <size>;
            
            --width-max-grid-fill: <size>;
          
          }