CSS Grid

CSS Grid Layout is a web layout system that supports two-dimensions. Flexbox is a one-dimensional layout system, so it only controls either rows or columns in this dimension. Grid lets you control rows and columns simultaneously which enables much more flexibility and control when building complex web layouts that are responsive.

Why Use CSS Grid?

There are many reasons why CSS Grid is so useful:

• Two-dimensional layout: A Grid layout controls both horizontal and vertical alignment simultaneously whereas a Flexbox layout controls one dimension at a time. The ability to control the layout precisely. You can control the size of rows and columns independently and place items exactly where you want them.
• Precise control over layout: You can control the size of rows and columns independently and place items exactly where you want them.
• Responsive design: A CSS Grid makes your responsive layout easier because you can create the layout based on the screen sizes when you define your responsive layouts.

Basic Structure of CSS Grid

To create a CSS Grid layout, you need to define a grid container using display: grid; on the parent element. Once you have set your parent up as a grid you will set up your rows and columns and control them using grid properties.

Basic Example

          .container {
               display: grid;
               grid-template-columns: 1fr 1fr 1fr;
               grid-gap: 10px;
          }
          
          .item {
               background-color: #4CAF50;
               color: white;
               padding: 20px;
          }

In this example, the grid container will have three equal-width columns and a gap of 10px between the grid items. The .item elements will automatically be arranged within these columns.

CSS Grid Properties

Grid Container Properties

The following properties are applied to the grid container:

• display: The property to define the grid container. Set it to grid to activate the grid layout.
• grid-template-columns: Defines the number and size of columns in the grid. For example, grid-template-columns: 1fr 2fr 1fr; creates three columns, with the middle one being twice as wide as the others.
• grid-template-rows: Defines the number and size of rows in the grid. For example, grid-template-rows: 100px auto 50px; creates three rows with different heights.
• grid-gap: Defines the gap between rows and columns. It’s a shorthand for grid-row-gap and grid-column-gap.
• grid-template-areas: Defines grid areas by naming the sections of the grid. This allows for a more visual way to structure your layout. For example:

  
            .container {
                      "grid-template-areas": header header header
                                          "main main sidebar"
                                          "footer footer footer";
            }
  

Grid Item Properties

Grid items can also be modified using additional properties:

• grid-column:grid-column: This property tells how many columns a grid item will span. It takes values of, span span 2 or 1 / 3 (which will cover starting at the first column and end at the third column).
• grid-row: This property tells how many rows a grid item will span. It takes values of, span 2 or 1 / 3(which will cover starting at the first row and end at the third row).
• grid-area: Allows you to define a grid item’s position by referring to grid areas. It can be shorthand for grid-column-start, grid-column-end, grid-row-start, and grid-row-end.

Media Queries with Grid

CSS Grid is also compatible with media queries, allowing you to build layouts that adapt to different screen sizes. You can change the grid’s structure based on the viewport size, creating a fully responsive design.

          @media (max-width: 600px) {
                 .container  {
                     grid-template-columns: 1fr;
                }
          }

This media query will change the grid layout to a single column on screens with a width of 600px or less.

Example: Basic Grid Layout

Here’s an example of how you can create a basic grid layout for a website using CSS Grid:

          .container  {
               display: grid;
               grid-template-columns: 1fr 3fr;
               grid-gap: 20px;
          }

          .header  {
               grid-column: 1 / 3;
               background-color: #4CAF50;
               color: white;
               padding: 20px;
          }

          .sidebar  {
               background-color: #f1f1f1;
               padding: 20px;
          }

          .main  {
               background-color: #f9f9f9;
               padding: 20px;
          }

          .footer  {
               grid-column: 1 / 3;
               background-color: #333;
               color: white;
               padding: 10px;
          }

     

Best Practices for Using CSS Grid

• Use grid-template-areas property to illustrate and subsequently design a layout for your needs.
• Use Grid with Flexbox for any complex layout where you want layout specifications as well as item alignment within grid cells.
• Be sure to think carefully about your grid layouts as grid-template-columns and grid-template-rows specify your content behavior.
• Take advantage of auto-fill and auto-fit for layouts that will respond & change based on content and viewport size dynamically.

Conclusion

CSS Grid is an extraordinary tool for all your layout needs. Once you understand the power of CSS Grid, you will have the ability to craft complex & responsive web pages with ease (it’s also a very flexible layout tool). You will be able to create exact & adaptable layouts across a multitude of screen sizes & devices by mastering CSS Grid. It should be an important tool for any modern web developer's toolbox.