CSS GRID

CSS Grid is a powerful layout system in CSS that allows you to create complex, responsive grid-based layouts with ease. It enables you to define rows and columns and then place items into specific grid cells or span across multiple rows and columns.

Here are some key concepts of CSS Grid:

  1. Defining a Grid Container To create a grid, you need to set an element as a grid container by using display: grid or display: inline-grid. 

    2.                         .container {
                        display: grid;
                      }


  2. Creating Grid Tracks (Rows and Columns) You can define the rows and columns of the grid using the grid-template-rows and grid-template-columns properties. 

    3.                         .container {
                                                display: grid;
                                                grid-template-columns: 1fr 2fr 1fr;  /* Three columns */
                                                grid-template-rows: 100px 200px;    /* Two rows */
                                              }


    1fr, 2fr, etc., are fractional units, which divide the available space proportionally. You can also use other units like pixels (px), percentages (%), and auto (auto).

  3. Grid Items Child elements of the grid container become grid items. These items are placed into the grid based on their order in the markup or by using specific grid properties. 

    4.                         
    
                          
    1
    
                          
    2
    
                          
    3
    
                          
    4


  4. Placing Grid Items You can control where the grid items appear using the grid-column and grid-row properties. 

    5.                         .item {
                          grid-column: 2 / 4; /* Spans from column 2 to column 4 */
                          grid-row: 1 / 2;    /* Stays in the first row */
                        }
                        Alternatively, CSS Grid allows you to use the grid-area shorthand for both row and column placement.
                        
                        .item {
                                                grid-area: 1 / 2 / 2 / 4; /* row-start / column-start / row-end / column-end */
                                              }


  5. 5. Implicit Grid If you have more items than the defined grid space, CSS Grid will automatically create additional rows or columns to fit those items.
  6. Aligning Items CSS Grid also offers alignment controls for items both vertically and horizontally within their respective grid cells: justify-items: Aligns items along the horizontal axis (default is stretch). align-items: Aligns items along the vertical axis (default is stretch). justify-self and align-self: Allow you to control alignment for individual items. 

    7.                         .container {
                        display: grid;
                        justify-items: center;  /* Horizontal alignment */
                        align-items: center;    /* Vertical alignment */
                      }


  7. Grid Gap You can specify the space between rows and columns with grid-gap (or gap in modern syntax): 

    8.     .container {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        grid-template-rows: 100px 100px;
                        gap: 10px;  /* Creates 10px spacing between items */
                      }


  8. Responsive Grid CSS Grid is responsive by nature. You can easily create a responsive grid layout using media queries. 

    9.                         .container {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr); /* Four equal-width columns */
                      }
                      
                      @media (max-width: 600px) {
                        .container {
                          grid-template-columns: 1fr;  /* Single column for smaller screens */
                        }
                      }


CONCLUSION

CSS Grid is an extremely flexible layout tool that provides fine control over how elements are positioned in a layout. With properties like grid-template-columns, grid-template-rows, and grid-gap, as well as alignment tools, it simplifies the creation of complex layouts while allowing responsive designs.

Home