CSS Grid is a tool for two-dimensional layout of web pages. After creating a container with display: grid, use grid-template-columns and grid-template-rows to define rows and columns; 1. Use fr units or fixed values ??to set the size; 2. Use gap to control spacing, justify-items and align-items to control alignment; 3. Specify the starting line position of the child item through grid-column and grid-row; 4. Use repeat() to simplify repeated structure definitions; 5. Use grid-area to implement named area template layout.

CSS Grid is a powerful tool for modern web layout, especially suitable for two-dimensional grid structures. It is not only good at single-directional arrangement like Flexbox, but it can handle rows and columns at the same time, giving you more flexibility in controlling page structure.

Basic syntax: define a grid container

To use CSS Grid, you must first set display: grid; on the container. This step is the basis. If this attribute is not added, the subsequent grid settings will not work.

Then you can use grid-template-columns and grid-template-rows to define the number and size of columns and rows. for example:

 .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

The above code will create three columns, the middle column is twice as wide as the left and right columns. The fr unit is a feature of Grid, indicating "the proportion of available space".

You can also use a mix of fixed values ??(such as 200px ) and proportional units:

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

Control spacing and alignment

The gap between grids can be set using the gap attribute, which can set the spacing between rows and columns at the same time, such as:

 gap: 20px 30px;

Equivalent to:

 row-gap: 20px;
column-gap: 30px;

In terms of alignment, Grid provides justify-items and align-items to control the alignment of child elements within cells. For example:

• justify-items: center; let all children center horizontally
• align-items: start; let them align the top

If you just want to control the location of a child separately, you can use justify-self or align-self .

Use grid-line to name or number content

You can precisely control the position of the child by specifying which line it starts from and which line it ends. for example:

 .item {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

The meaning of this code is: this element starts from the second vertical line and spans to the fourth line; it is displayed on the first line.

You can also name these lines, which makes it more intuitive to write:

 grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col2-end];

Then when positioning, you can write it like this:

 grid-column: col1-start / col2-end;

Several Tips to Simplify Complex Layouts

• Use repeat() to simplify the repeat structure
  If there are multiple columns of the same width, you do not need to write them one by one:

   grid-template-columns: repeat(3, 1fr);

• Automatically adjust the number of columns and adapt to container width

   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  This combination is very practical and is especially suitable for responsive designs.

• Quickly layout templates with grid-area You can directly name each region and define the template structure in the container:

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

  Then, just add the corresponding grid-area: header; for each child to automatically return.

  ---

  Basically, that’s all. By mastering these basic concepts and common techniques, you can easily make various complex grid layouts.

  The above is the detailed content of Creating grid layouts with css grid. For more information, please follow other related articles on the PHP Chinese website!