Grid layout of CSS layout

Grid Layout is a CSS layout model that makes it easier to implement complex layouts by dividing the page into a grid of rows and columns.

To use a grid layout, you need to set the display property of the element to grid. The grid's rows and columns can then be defined using the grid-template-rows and grid-template-columns properties.

For example, the following code defines a grid with 3 rows and 3 columns:

.container {
    
    
  display: grid;
  grid-template-rows: 100px 200px 100px;
  grid-template-columns: 1fr 2fr 1fr;
}

In the code above, .container is the container element that contains the grid. The grid-template-rows attribute defines the row height of the grid, which are 100 pixels, 200 pixels and 100 pixels respectively. The grid-template-columns attribute defines the column width of the grid, which are 1fr (occupy 1/4 of the remaining space), 2fr (occupy 1/2 of the remaining space) and 1fr (occupy 1/4 of the remaining space).

Next, you can use the grid-row and grid-column properties to specify the position of the element in the grid.

For example, the following code places an element at row 2, column 2:

.item {
    
    
  grid-row: 2;
  grid-column: 2;
}

You can also use the grid-area property to specify the position of the element in the grid at once, as follows:

.item {
    
    
  grid-area: 2 / 2 / 3 / 3;
}

The above code places the element in the area from row 2, column 2 to row 3, column 3.

Grid layout also provides some other properties, such as grid-gap is used to set the spacing between grid rows and columns, justify-items and align-items are used to set the horizontal and vertical alignment of elements in the grid, etc.

The advantage of grid layout is that complex layouts can be easily implemented without complex nesting and positioning techniques. It is suitable for various types of layouts, including responsive layouts and multi-column layouts.

Container property details

In Grid Layout, there are a number of properties that can be used to define and control the behavior and appearance of containers. The following are detailed descriptions of some commonly used container properties:

1. display: grid;

   • Used to set the element as a grid container, enabling grid layout.

2. grid-template-rows:

   • Used to define the row height of the grid. Row heights can be specified using pixels (px), percentages (%), auto (auto), grid row track names, or grid template functions.
   • Example: grid-template-rows: 100px 200px auto;

3. grid-template-columns:

   • Used to define the column width of the grid. Column widths can be specified using pixels (px), percentages (%), auto (auto), grid column track names, or grid template functions.
   • Example: grid-template-columns: 1fr 2fr 1fr;

4. grid-template-areas:

   • Used to define a grid layout by specifying the name of the grid area. You can use the grid area name to specify the position of the element in the grid.
   • Example:

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

5. grid-gap:

   • Used to set the spacing between grid rows and columns. The size of the interval can be specified in pixels (px), percentage (%), or other length units.
   • Example: grid-gap: 10px;

6. justify-items:

   • Used to set the horizontal alignment of elements in the grid. Alignment can be specified using values ​​such as start, end, center, stretch, etc.
   • Example: justify-items: center;

7. align-items:

   • Used to set the vertical alignment of elements in the grid. Alignment can be specified using values ​​such as start, end, center, stretch, etc.
   • Example: align-items: center;

8. justify-content:

   • Used to set the horizontal alignment of all elements in the grid. Alignment can be specified using values ​​such as start, end, center, stretch, space-between, space-around, etc.
   • Example: justify-content: center;

9. align-content:

   • Used to set the vertical alignment of all elements in the grid. Alignment can be specified using values ​​such as start, end, center, stretch, space-between, space-around, etc.
   • Example: align-content: center;

The above are some commonly used grid container properties, which can help you define and control the appearance and behavior of the grid layout. By using these properties, you can easily create complex layouts and flexibly adjust the structure and style of the grid.

project properties

In grid layout, there are a number of properties that can be used to define and control the behavior and appearance of items (elements) within a grid container. The following are detailed descriptions of some commonly used project properties:

1. grid-row-start、grid-row-end、grid-column-start、grid-column-end：

   • These properties are used to specify the starting and ending row, starting and ending column positions of the item within the grid container.
   • 示例：grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; grid-column-end: 4;

2. grid-row、grid-column：

   • These properties can be used to specify the position of the item within the grid container at one time, by specifying the position of the start row and end row, start column and end column.
   • Example: grid-row: 1 / 3; grid-column: 2 / 4;

3. grid-area：

   • This property is used to specify the position of the item within the grid container at one time, by specifying the start and end row, the position of the start and end column, or the name of the grid area.
   • Example: grid-area: 1 / 2 / 3 / 4; or grid-area: header;

4. justify-self：

   • This property is used to set the horizontal alignment of the item within its grid cell. Alignment can be specified using values ​​such as start, end, center, stretch, etc.
   • Example: justify-self: center;

5. align-self：

   • This property is used to set the vertical alignment of the item within its grid cell. Alignment can be specified using values ​​such as start, end, center, stretch, etc.
   • Example: align-self: center;

6. order：

   • This property is used to control the order of items. An integer value can be used to specify the order of the items, the lower the number, the higher the item.
   • Example: order: 1;

7. justify-items：

   • This property is used to set the horizontal alignment of items within the entire grid container. Alignment can be specified using values ​​such as start, end, center, stretch, etc.
   • Example: justify-items: center;

8. align-items：

   • This property is used to set the vertical alignment of items within the entire grid container. Alignment can be specified using values ​​such as start, end, center, stretch, etc.
   • Example: align-items: center;

Above are some commonly used grid item properties, which can help you define and control the position, alignment and order of items in the grid container. By using these properties, you can easily adjust the layout and appearance of items, and achieve various complex grid layout effects.