CSS Grid

CSS Grid

Introduction:

CSS Grid is a layout system in CSS that allows you to create complex, grid-based layouts for web pages. With CSS Grid, you can divide a web page into rows and columns and then place content within those cells, creating a responsive and flexible design that can adapt to different screen sizes.

Types of CSS Grid:

There are two types of CSS Grids:

1) Fixed Grids:

Fixed grids have a fixed number of columns and rows that are defined by the developer. The size and width of each cell are predetermined and do not change.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

.grid-item {
  background-color: red;
}

In this example, the grid container has three columns and three rows that are each 100 pixels wide and tall. The background color of each grid item is set to red.

2) Flexible Grids:

Flexible grids have a dynamic number of columns and rows that adjust based on the size and content of the grid items. The size and width of each cell are determined by the content inside it.

Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-item {
  background-color: red;
}

In this example, the grid container has a flexible number of columns and rows that adjust based on the content inside each grid item. The repeat(auto-fit, minmax(100px, 1fr)) property value allows the grid to have as many columns and rows as possible that are at least 100 pixels wide and tall. The background color of each grid item is set to red.

Properties and Values:

CSS Grid provides a variety of properties and values to help you control the layout and positioning of elements in a grid. Here are some of the most common properties and values used in CSS Grid:

  1. display: grid; - This property defines an element as a grid container.

  2. grid-template-columns: value; - This property sets the width and number of columns in the grid. You can specify the width of each column using a value such as px, em, fr, or %. For example:

     grid-template-columns: 100px 1fr 2fr;
    

    This sets the grid to have three columns, the first with a width of 100 pixels, the second taking up one fraction of the remaining space, and the third taking up two fractions.

  3. grid-template-rows: value; - This property sets the height and number of rows in the grid. You can specify the height of each row using a value such as px, em, fr, or %. For example:

     grid-template-rows: 50px 1fr 2fr;
    

    This sets the grid to have three rows, the first with a height of 50 pixels, the second taking up one fraction of the remaining space, and the third taking up two fractions.

  4. grid-template-areas: value; - This property allows you to create named grid areas, which can be used to position elements within the grid. You can define the areas using a string of characters, where each character represents a cell in the grid. For example:

     grid-template-areas:
       "header header header"
       "nav    main   sidebar"
       "footer footer footer";
    

    This defines a grid with three rows and three columns, and three named areas (header, nav, main, sidebar, and footer).

  5. grid-column: value; - This property allows you to position an element within a specific column in the grid. You can specify the start and end points of the column using values such as 1, 2, 3, span, or auto. For example:

     grid-column: 2 / span 2;
    

    This positions the element starting from the second column and spanning two columns.

  6. grid-row: value; - This property allows you to position an element within a specific row in the grid. You can specify the start and end points of the row using values such as 1, 2, 3, span, or auto. For example:

     grid-row: 2 / span 2;
    

    This positions the element starting from the second row and spanning two rows.

  7. grid-area: value; - This property allows you to position an element within a specific named area in the grid. You can specify the name of the area using a string. For example:

     grid-area: header;
    

    This positions the element within the header named area.

These are just a few examples of the properties and values available in CSS Grid. With these tools, you can create complex and flexible grid-based layouts that adapt to different screen sizes and device types.

Features of CSS Grid:

Here are some of the key features of CSS Grid:

  1. Grid container: The grid container is the parent element that contains all the grid items. You can define a grid container by setting the display property to grid.

  2. Grid items: The grid items are the child elements that are placed inside the grid container. You can define the position and size of each grid item using the grid-row, grid-column, and grid-area properties.

  3. Grid lines: The grid lines are the horizontal and vertical lines that define the rows and columns of the grid. You can define the number and size of the grid lines using the grid-template-rows and grid-template-columns properties.

  4. Grid tracks: The grid tracks are the areas between the grid lines that contain the grid items. You can define the size and position of the grid tracks using the grid-row-gap and grid-column-gap properties.

Thanks for reading!

If you found this article helpful, please like and share it, Thank you😊

You can connect with me on Linkedin.